/*
FILE: web/css/runtime_index_flow_all_outer_frames_thin_v18_66.css
ROLE: homepage flow outer frames full thin truth
STATUS: active patch v18.66
DOES:
- thins the second/light-blue outer frame around the homepage flow panel
- keeps the removed red/orange frame dead
- makes all outer wrapper frames around the flow panel thin and calm
- preserves individual card role colors
DOES NOT:
- touch backend, auth, database, submit, sessions, storage
*/

:root{
  --abc-v1866-green-frame: rgba(80, 230, 155, .44);
  --abc-v1866-blue-thin: rgba(74, 166, 255, .34);
  --abc-v1866-soft-inner: rgba(80, 230, 155, .055);
}

/* Same location as old red frame + the remaining light-blue frame. */
body[data-page="index"] :is(
  .abc-stack,
  main.abc-stack,
  .home-flow-panel,
  .home-route-panel,
  .home-content-panel,
  .home-dashboard-panel,
  .index-flow-panel,
  .index-flow-grid-wrap,
  .index-flow-grid,
  .flow-grid-wrap,
  .flow-grid,
  .route-grid-wrap,
  .route-grid,
  .dashboard-grid,
  .content-engine-panel,
  .clean-main-panel,
  [data-home-flow-panel],
  [data-flow-menu],
  [data-content-menu],
  [data-route-panel],
  [data-flow-panel]
){
  border-width:1px !important;
  outline-width:0 !important;
  outline:0 !important;
  box-shadow:
    inset 0 0 0 1px var(--abc-v1866-soft-inner),
    0 8px 20px rgba(0,0,0,.12) !important;
}

/* Outer-most flow wrapper: green thin. */
body[data-page="index"] :is(
  .abc-stack,
  main.abc-stack,
  .home-flow-panel,
  .home-route-panel,
  .home-content-panel,
  .index-flow-panel,
  .content-engine-panel,
  .clean-main-panel,
  [data-home-flow-panel],
  [data-flow-panel]
){
  border-color:var(--abc-v1866-green-frame) !important;
}

/* Inner wrapper / light-blue frame: keep blue only if it is useful, but thin and calm. */
body[data-page="index"] :is(
  .index-flow-grid-wrap,
  .index-flow-grid,
  .flow-grid-wrap,
  .flow-grid,
  .route-grid-wrap,
  .route-grid,
  .dashboard-grid,
  [data-flow-menu],
  [data-content-menu],
  [data-route-panel]
){
  border-color:var(--abc-v1866-blue-thin) !important;
  border-width:1px !important;
  outline:0 !important;
}

/* Direct children that create the blue rectangle around the 6 cards. */
body[data-page="index"] :is(
  .abc-stack,
  main.abc-stack,
  .home-flow-panel,
  .home-route-panel,
  .home-content-panel,
  .index-flow-panel,
  .content-engine-panel,
  .clean-main-panel
) > :is(
  div,
  section,
  .index-flow-grid,
  .flow-grid,
  .route-grid,
  .dashboard-grid,
  .index-flow-grid-wrap,
  .flow-grid-wrap,
  .route-grid-wrap
){
  border-width:min(1px, 1px) !important;
  outline-width:0 !important;
}

/* Any old thick blue/cyan frame class in homepage flow area becomes 1px. */
body[data-page="index"] :is(
  [class*="blue-frame"],
  [class*="cyan-frame"],
  [class*="flow-frame"],
  [class*="panel-frame"],
  [class*="grid-frame"],
  [class*="content-frame"],
  [class*="engine-frame"],
  [class*="outer-frame"]
){
  border-width:1px !important;
  outline:0 !important;
  box-shadow:inset 0 0 0 1px var(--abc-v1866-soft-inner) !important;
}

/* Prevent pseudo-elements from drawing another thick blue/red frame. */
body[data-page="index"] :is(
  .abc-stack,
  main.abc-stack,
  .home-flow-panel,
  .home-route-panel,
  .home-content-panel,
  .home-dashboard-panel,
  .index-flow-panel,
  .index-flow-grid-wrap,
  .index-flow-grid,
  .flow-grid-wrap,
  .flow-grid,
  .route-grid-wrap,
  .route-grid,
  .dashboard-grid,
  .content-engine-panel,
  .clean-main-panel,
  [data-home-flow-panel],
  [data-flow-menu],
  [data-content-menu],
  [data-route-panel],
  [data-flow-panel],
  [class*="blue-frame"],
  [class*="cyan-frame"],
  [class*="flow-frame"],
  [class*="panel-frame"],
  [class*="grid-frame"],
  [class*="content-frame"],
  [class*="engine-frame"],
  [class*="outer-frame"]
)::before,
body[data-page="index"] :is(
  .abc-stack,
  main.abc-stack,
  .home-flow-panel,
  .home-route-panel,
  .home-content-panel,
  .home-dashboard-panel,
  .index-flow-panel,
  .index-flow-grid-wrap,
  .index-flow-grid,
  .flow-grid-wrap,
  .flow-grid,
  .route-grid-wrap,
  .route-grid,
  .dashboard-grid,
  .content-engine-panel,
  .clean-main-panel,
  [data-home-flow-panel],
  [data-flow-menu],
  [data-content-menu],
  [data-route-panel],
  [data-flow-panel],
  [class*="blue-frame"],
  [class*="cyan-frame"],
  [class*="flow-frame"],
  [class*="panel-frame"],
  [class*="grid-frame"],
  [class*="content-frame"],
  [class*="engine-frame"],
  [class*="outer-frame"]
)::after{
  content:none !important;
  display:none !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
}

/* Card colors stay independent. */
body[data-page="index"] :is(
  .home-route-card,
  .home-flow-card,
  .flow-route-card,
  .flow-card,
  .abc-flow-card,
  [data-flow-type],
  [data-route-family],
  [data-account-flow]
){
  border-width:1px !important;
}