/* use-cases.css — the use-case pages and the Use cases page (HQ-2). Ayush, 13 Oct:
   "we should add infographics also", then "the infographics is really poor
   quality, they should a bit big", and a Use cases page "like https://systam.io/"
   so visitors see every use case in one place. One file for all of them. The
   colours are only the palette's variables, which blog.css defines (written
   there from lib/palette.mjs), so light, dark and a palette change follow. */

/* the title block, full width above the article */
.uc-top { max-width: 900px; }
.uc-top h1 { margin-top: 14px; font-size: clamp(2.1rem, 4.2vw, 3.1rem); line-height: 1.08; letter-spacing: -0.02em; }
.uc-lede { margin-top: 18px; font-size: 1.2rem; line-height: 1.5; color: var(--muted); max-width: 40em; }

/* the big picture under the title: what the office would see, step by step */
.uc-visual { margin: 36px 0 60px; background: var(--paper); border-radius: 20px; padding: 30px; }
.uc-visual > figcaption { margin-top: 18px; font-size: 15px; line-height: 1.5; color: var(--soft); }
.uv-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 10px 24px; margin-bottom: 24px; }
.uv-head h2 { font-size: 1.4rem; line-height: 1.25; }
.uv-key { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14.5px; color: var(--muted); }
.uv-key span { display: inline-flex; align-items: center; gap: 7px; }
.uv-key span::before { content: ""; width: 12px; height: 12px; border-radius: 50%; }
.uv-key .auto::before { background: var(--teal); }
.uv-key .team::before { background: var(--manila-edge); }
.uv-key .cut::before { border-radius: 3px; box-shadow: inset 0 0 0 2px var(--ink); }
.uv-key .due::before { border-radius: 3px; background: var(--ink); }

.stages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px; }
.stages.wide-mid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr) minmax(0, 0.9fr); }
.stage { position: relative; display: flex; flex-direction: column; gap: 14px; }
.stage > .mk { flex: 1; align-content: start; }
.stage + .stage::before { content: "\2192"; position: absolute; left: -35px; top: 0; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; background: var(--ground); color: var(--teal); font-weight: 700; font-size: 15px; box-shadow: 0 0 0 1px var(--line); }
.stage-title { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 18px; line-height: 1.3; }
.stage-title .n { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--teal); color: var(--teal-ink); display: grid; place-items: center; font-size: 14px; }
.stage .say { font-size: 15.5px; line-height: 1.45; color: var(--muted); }
.uv-split { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.uv-col { display: grid; gap: 16px; }
.team-strip { margin-top: 28px; display: flex; align-items: center; gap: 14px; background: var(--manila); color: var(--manila-ink);
  border: 1px solid var(--manila-edge); border-radius: 12px; padding: 14px 18px; font-size: 16px; line-height: 1.45; }
.team-strip svg { flex: none; width: 24px; height: 24px; }
.team-strip b { font-weight: 600; }

/* the mock-ups */
.mk { background: var(--ground); border: 1px solid var(--line); border-radius: 12px; padding: 14px; display: grid; gap: 10px;
  font-size: 14.5px; line-height: 1.4; box-shadow: 0 1px 2px rgb(0 0 0 / 0.05); min-width: 0; }
.mk-label { font-size: 12.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--soft); font-weight: 600; }
.file { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: center; }
.fi { width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; background: var(--teal-wash); color: var(--teal); }
.file.team .fi { background: var(--manila); color: var(--manila-ink); }
.fi svg { width: 18px; height: 18px; }
.file small, .bubble small, .sheet small { display: block; color: var(--soft); font-size: 12.5px; }
.path { font-size: 13.5px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
.path svg { width: 16px; height: 16px; color: var(--teal); }
.path b { color: var(--ink); font-weight: 600; }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ticks li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.ticks .ok, .ticks .no { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.ticks .ok { background: var(--teal); color: var(--teal-ink); }
.ticks .no { background: var(--manila); color: var(--manila-ink); box-shadow: inset 0 0 0 1px var(--manila-edge); }
.tag { font-size: 12.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.tag.auto { background: var(--teal-wash); color: var(--teal); }
.tag.team { background: var(--manila); color: var(--manila-ink); }
.tag.wait { background: var(--paper); color: var(--muted); }
.bubble { max-width: 94%; padding: 9px 12px; border-radius: 12px; font-size: 14px; line-height: 1.4; }
.bubble.in { justify-self: start; background: var(--paper); border-top-left-radius: 4px; }
.bubble.out { justify-self: end; background: var(--teal-wash); border-top-right-radius: 4px; }
.att { margin-top: 7px; display: flex; align-items: center; gap: 7px; background: var(--ground); border-radius: 8px; padding: 6px 9px; font-size: 13px; }
.att svg { width: 16px; height: 16px; color: var(--teal); flex: none; }
.sheet { width: 100%; border-collapse: collapse; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.sheet th { text-align: left; font-weight: 600; color: var(--muted); background: var(--paper); padding: 7px 8px; }
.sheet td { padding: 8px; border-top: 1px solid var(--line); vertical-align: top; }
.sheet .num { text-align: right; white-space: nowrap; }
.sheet tr.flag td { background: var(--manila); color: var(--manila-ink); }
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cal .dow { font-size: 12.5px; color: var(--soft); text-align: center; font-weight: 600; padding-bottom: 2px; }
.cal .d { min-height: 58px; border-radius: 8px; background: var(--paper); padding: 6px 7px; font-size: 13px; display: grid; align-content: space-between;
  font-variant-numeric: tabular-nums; min-width: 0; }
.cal .d.blank { background: transparent; }
.cal .d em { font-style: normal; font-size: 11.5px; font-weight: 600; line-height: 1.15; overflow-wrap: anywhere; }
.cal .d.auto { background: var(--teal-wash); } .cal .d.auto em { color: var(--teal); }
.cal .d.cut { background: var(--ground); box-shadow: inset 0 0 0 2px var(--ink); }
.cal .d.due { background: var(--ink); color: var(--ground); }
.cal .d.team { background: var(--manila); color: var(--manila-ink); }

/* the Use cases page: every use case in one place */
.uc-group { margin-top: 52px; }
.uc-group > h2 { font-size: 1.7rem; line-height: 1.2; }
.uc-group > p { margin-top: 8px; color: var(--muted); max-width: 40em; }
.uc-cards { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.uc-card { height: 100%; display: grid; grid-template-rows: auto 1fr; background: var(--paper); border-radius: 18px; text-decoration: none; color: var(--ink); }
.uc-card:hover { box-shadow: inset 0 0 0 2px var(--teal); }
.uc-card .pic { padding: 22px 22px 0; }
.uc-card .pic .mk { min-height: 158px; align-content: start; }
.ticks .dt { font-weight: 600; font-size: 13px; background: var(--paper); border-radius: 6px; padding: 3px 0; text-align: center; }
.ticks.dates li { grid-template-columns: 62px minmax(0, 1fr) auto; }
/* on a phone the calendar squares are too small for words: the dates are listed under it instead */
.cal-list { display: none; }
.ticks .ic { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--teal-wash); color: var(--teal); }
.ticks .ic svg { width: 13px; height: 13px; }
.uc-card .txt { padding: 20px 22px 24px; display: grid; gap: 8px; align-content: start; }
.uc-card h3 { font-size: 1.3rem; line-height: 1.25; }
.uc-card p { color: var(--muted); font-size: 16px; line-height: 1.5; }
.uc-card .go { margin-top: 4px; color: var(--teal); font-weight: 600; }

@media (max-width: 1000px) {
  .uc-cards { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
}
@media (max-width: 860px) {
  .uc-visual { padding: 20px 16px; }
  .stages, .stages.wide-mid, .uv-split { grid-template-columns: minmax(0, 1fr); gap: 46px; }
  .stage + .stage::before { content: "\2193"; left: calc(50% - 13px); top: -36px; }
  .uv-split { gap: 20px; }
}
@media (max-width: 560px) {
  .cal { gap: 4px; }
  .cal .d { min-height: 40px; padding: 4px 5px; font-size: 12.5px; }
  .cal .d em { display: none; }
  .cal-list { display: grid; }
}