/* The large card frame (summa-components, 2026-09-26). The thread card's shape, lifted so any big card in suMMa wears it:
   the Threads card first, the order card next (Mo, 2026-09-26: "i want the shape of the component from the threads page
   ... to be the new container for the revamped order panel"; "generally want to reuse it as much as possible with large
   card designs across platform"). Recipe: summa-design/components/card-frame.md.

   .c-card                the card: a column (the host's element; .is-lifted = the desk shadow + rounded corners)
     .c-card-head         the sand header band: title, pills, a toolbar of actions on the right
     .c-card-strip        a thin band under the header (who is owed what); .is-receipt = the cool-sand receipt band
     .c-card-page         the white page: the raised top over the recessed well, one card
       .c-card-top        the raised part: what this is, at a glance (pinned; scrolls only when the window is short)
       .c-card-well       the recessed ground: the long content (a timeline, sections), its own scroll
         .c-card-scroll   the well's scroll (clears the floating dock; fades out under it)
         .c-card-foot     the bar at the bottom of the well (the note composer)
     .c-card-dock         the floating bar over the well's foot (Monty, the hands)

   Region rules are written .c-card .c-card-x so they outrank a host's plain one-class rules; a host's own states and
   contexts (the phone drawer, the read-only view) are more specific and still win. Tokens only, except the two sand
   bands, which are the Classic header colours (Mo, 2026-09-21). */
.c-card{min-width:0;min-height:0;display:flex;flex-direction:column;gap:0;position:relative}
.c-card.is-lifted{box-shadow:0 2px 4px rgba(42,36,24,.10),0 10px 20px -8px rgba(42,36,24,.20);border-radius:15px 15px 16px 16px}

.c-card .c-card-head{position:relative;z-index:6;display:flex;align-items:center;gap:10px;padding:12px 10px 12px 18px;min-height:64px;border:0;border-radius:15px 15px 0 0;color:var(--ink);background:#e6dacc;box-shadow:inset 0 -1px 0 rgba(111,82,54,.16),0 0 0 1px rgba(205,181,153,.44);-webkit-backdrop-filter:none;backdrop-filter:none}   /* Classic, option B (Mo, 2026-09-21): one flat sand, a hairline where it meets the page */

.c-card .c-card-strip{display:flex;flex-wrap:wrap;gap:6px 14px;padding:7px 18px;border-top:1px solid var(--line);font-size:12px;color:var(--ink-3);min-width:0}
.c-card .c-card-strip.is-receipt{flex-wrap:nowrap;align-items:center;gap:8px;background:#dde2da;color:var(--green-2);font-size:13px;font-weight:600;border-top:1px solid rgba(70,90,70,.14);box-shadow:inset 0 -1px 0 rgba(70,90,70,.16),0 0 0 1px rgba(150,170,150,.4)}   /* the receipt (Mo, 2026-09-21) */

.c-card .c-card-page{position:relative;z-index:1;flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-top:0;border-radius:0 0 16px 16px;scrollbar-width:thin;scrollbar-color:transparent transparent;transition:none}
.c-card .c-card-top{flex:0 1 auto;min-height:0;overflow-y:auto;position:relative;padding:22px 24px 18px;background:var(--panel);border-top:1px solid var(--line-strong);box-shadow:inset 0 9px 12px -12px rgba(0,0,0,.14)}   /* pinned; it only scrolls when the window is too short for it (Mo, 2026-09-19) */
.c-card .c-card-well{position:relative;flex:1 1 0;min-height:240px;display:flex;flex-direction:column;padding:0;border:0;border-top:1px solid var(--line-strong);border-radius:0;background:var(--bg);box-shadow:inset 0 9px 12px -12px rgba(0,0,0,.14)}
.c-card .c-card-scroll{flex:1;min-height:0;overflow-y:auto;padding:16px 20px 164px;-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 96px),rgba(0,0,0,.25) calc(100% - 40px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 96px),rgba(0,0,0,.25) calc(100% - 40px),transparent)}   /* scrolls under the floating dock and fades there */
.c-card .c-card-foot{flex:none;z-index:2;background:var(--bg);border-top:1px solid var(--line-strong);box-shadow:inset 0 9px 12px -12px rgba(0,0,0,.14)}

.c-card .c-card-dock{flex:none;position:absolute;left:12px;right:12px;bottom:64px;z-index:6;margin:0;overflow:visible}
/* a narrow window: the card is one long page (the phone drawer adds its own rules on top) */
@media (max-width:767px){.c-card .c-card-dock{position:static}.c-card .c-card-page{overflow:visible;border-radius:0}.c-card .c-card-top{overflow:visible;max-height:none}.c-card .c-card-well{overflow:visible;min-height:0}.c-card .c-card-scroll{overflow:visible}}

/* ── one scroll (Mo, 2026-09-26: "make the thread card component entirely scrollable. meaning summary isn't just fixed.
   this is for both threads and order cards") ── on a desk the page scrolls as ONE: the raised top goes up with the well
   under it; the well's foot (the note bar) stays pinned at the bottom of the page; the dock still floats over it. A page
   that covers the card (a touchpoint) opens at the top: the host scrolls the page to 0 and it holds still while it is
   open (cmpThreadPanel keep / restore). The phone drawer already scrolled as one. */
@media (min-width:769px){
  .c-card .c-card-page{overflow-x:hidden;overflow-y:auto}
  .c-card .c-card-top{flex:none;overflow:visible;max-height:none}
  .c-card .c-card-well{flex:1 0 auto;min-height:240px}
  .c-card .c-card-scroll{flex:1 0 auto;min-height:0;overflow:visible;-webkit-mask-image:none;mask-image:none}
  .c-card .c-card-foot{position:sticky;bottom:0}
  .c-card .c-card-page:has(.cs-tl-card.has-page){overflow:hidden}   /* a thread page fills the section under the summary and scrolls inside itself */
  .c-card .c-card-page.is-scrolling,.c-card .c-card-page:hover{scrollbar-color:var(--line-strong) transparent}   /* the thin bar shows while you scroll or point at it, like the old scrollers */
}

/* the kind: a bold glyph at the top left of the header band (thread / order), the nav's own icon */
/* bare and bigger: no tile, no glow, just the glyph (Mo, 2026-09-27, the order card first, then "do the same thing …
   with the thread card icon") */
.c-card-kind{flex:none;display:grid;place-items:center;color:var(--tone,var(--ink))}
.c-card-kind svg{display:block;width:var(--c-kind-size,63px);height:var(--c-kind-size,63px);stroke-width:var(--c-kind-stroke,.95)}   /* what the card is on a desk: Mo's values from the tune panel, 2026-09-29 (63px, line .95); 32 on a phone */
/* a hairline to its right, the twin of the one left of Close (Mo, 2026-09-29): thickness --c-kind-rule, space --c-kind-gap */
@media (min-width:769px){.c-card-head>.c-card-kind{padding-right:var(--c-kind-gap,5px);margin-right:calc(var(--c-kind-gap,5px) - 6px);border-right:var(--c-kind-rule,1.5px) solid var(--c-kind-rule-c,color-mix(in oklab,var(--line-strong) 45%,transparent))}
  .oc-head{--c-kind-rule-c:rgba(255,255,255,.16)}}
@media (max-width:768px){.c-card-kind svg{width:32px;height:32px;stroke-width:2.4}}   /* the phone keeps its weight: the panel was desk only */

/* a floating card's arrival and leaving: one pair for every card, so the order card and the thread card move the same
   (Mo, 2026-09-27: "the animations with jumping to and from orders/threads … need to be same") */
@keyframes card-rise{from{transform:translateY(56px);opacity:0}60%{opacity:1}to{transform:none;opacity:1}}
@keyframes card-sink{from{transform:none;opacity:1}to{transform:translateY(40px);opacity:0}}

/* The phone header of a card (Mo, 2026-09-27, look A, the same for a thread and an order): the kind icon and the name on
   the ⌄'s line, the name ellipsing before the ⌄, the number right of the ⌄; one line under it of chips and the age / day.
   The hosts hide their own title, pills and icon on the phone (cases-mobile.css, order-card.css). */
.c-hx{display:none}
@media (max-width:768px){
  .c-hx{display:block;grid-area:title;grid-column:1/-1;width:100%;min-width:0;padding:2px 2px 12px}
  .c-hx-top{position:absolute;left:12px;right:12px;top:22px;height:36px;display:flex;align-items:center;justify-content:space-between;pointer-events:none}
  .c-hx-l,.c-hx-r{display:flex;align-items:center;gap:8px;width:calc(50% - 30px);min-width:0}
  /* no ⌄ in the middle any more (Mo, 2026-10-14): the name takes the row, the number sits at its right */
  .c-hx-l{flex:1 1 auto;width:auto}.c-hx-r{flex:none;width:auto;justify-content:flex-end}
  .c-hx-r{justify-content:flex-end}
  .c-hx-top a,.c-hx-top button{pointer-events:auto}
  .c-hx .c-card-kind svg{width:26px;height:26px}
  .c-hx-name{flex:1 1 auto;min-width:0;font-size:20px;font-weight:800;line-height:1.2;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .c-hx-num{flex:none;font-family:var(--font-mono);font-size:15px;font-weight:700;opacity:.8;color:inherit;text-decoration:none}
  .c-hx-foot{display:flex;align-items:center;gap:8px;margin-top:6px;flex-wrap:nowrap;overflow:hidden}
  .c-hx-foot>*{flex:none}
  .c-hx-when{font-size:13px;font-weight:600;opacity:.75}
  .c-hx-chip{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:3px 8px;border-radius:6px}
  .c-hx-chip.is-amber{background:#f7ecd6;color:#8a5a12}.c-hx-chip.is-blue{background:#e3ecf7;color:#2c5282}
  .c-hx-chip.is-green{background:#e3f1e3;color:#2f7a3a}.c-hx-chip.is-rust{background:#fbe9e0;color:#a0452a}
  .c-hx-chip.is-grey,.c-hx-chip.is-plum{background:color-mix(in oklab,currentColor 12%,transparent)}
}

/* How a card closes (Mo, 2026-09-29): lucide circle-chevron-down everywhere. On a desk it is the Assign glyph's build
   (a 34px icon over an 11px caps word, 88×72) and a little different: quieter until hovered, the word in the icon's own
   tone, never green. On a phone the icon is the whole round button (no filled disc behind it). */
.cs-glyph.c-card-close{opacity:.62;transition:opacity .15s}
.cs-glyph.c-card-close:hover,.cs-glyph.c-card-close:focus-visible{opacity:1}
.cs-glyph.c-card-close small{color:inherit}
@media (max-width:768px){.cs-glyph.c-card-close{display:none}}