/*
  PLAN (Craft): next week's Monday–Friday plan, in the History window.
  Screen: 1394 × 938 (History window default; the page scrolls in the app,
  so the week is cropped at the window's bottom edge).

  Rebuilt from Sources/UI/History/CraftView.swift (header, lead),
  CraftContent.swift (filter bar, standard workspace), CraftWeekCanvas.swift
  (week surface, CraftCalendarBlock), CraftReviewPanel.swift (guided review),
  with CraftPreviewData.review as the Gallery's craft-standard fixture draws
  it: static gallery rendering, 32pt page inset, 24pt section gap, 360pt
  review column, morning field.
*/

.screen--craft {
  width: 1394px;
  height: 938px;

  /* Theme values the shared tokens do not carry. */
  --craft-paper: #fbfbf8;               /* ContentFill (History.paper) */
  --craft-glass-hairline: #e0e1de;      /* GlassHairline */
  --craft-glass-divider: #e6e7e4;       /* GlassDivider */
  --craft-tertiary: rgba(0, 0, 0, 0.26); /* NSColor.tertiaryLabelColor */
  --craft-selection-ink: #ffffff;       /* SelectionInk */
  --craft-tint: #065ba3;                /* highlight(.coraBlue).deep, the app tint */
  --craft-interactive: var(--selection);
  --craft-warning: var(--yellow);       /* support(.yellow, 100) */
  --craft-warning-fill: rgba(245, 158, 11, 0.14); /* Brand.amber 14% */
  --craft-purple: var(--purple);
  --craft-cal-pct: 20%;                 /* CalendarTint fill opacity, Light */

  /* Calendar colours (CraftPreviewData.PreviewCalendar) and the ink
     CalendarTint.ink derives for each: stepped to 4.5:1 on its wash. */
  --cal-work: #1badf8;     --cal-work-ink: #106895;
  --cal-team: #cc73e1;     --cal-team-ink: #854b92;
  --cal-personal: #63da38; --cal-personal-ink: #36781f;

  --btn-fill: #ffffff;
  --btn-ink: rgba(0, 0, 0, 0.85);
  --btn-edge: 0 0 0 0.5px rgba(0, 0, 0, 0.14), 0 0.5px 1.5px rgba(0, 0, 0, 0.12);
  --btn-disabled-ink: rgba(0, 0, 0, 0.25);
}

:root[data-theme="dark"] .screen--craft {
  --craft-paper: #0b171c;
  --craft-glass-hairline: #29424b;
  --craft-glass-divider: #29424b;
  --craft-tertiary: rgba(255, 255, 255, 0.25);
  --craft-selection-ink: #0b171c;
  --craft-cal-pct: 30%;
  --cal-work-ink: #5fc6fa;
  --cal-team-ink: #db9dea;
  --cal-personal-ink: #6bdc42;
  --btn-fill: rgba(255, 255, 255, 0.2);
  --btn-ink: rgba(255, 255, 255, 0.85);
  --btn-edge: 0 0 0 0.5px rgba(255, 255, 255, 0.06), 0 0.5px 1px rgba(0, 0, 0, 0.3);
  --btn-disabled-ink: rgba(255, 255, 255, 0.25);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .screen--craft {
    --craft-paper: #0b171c;
    --craft-glass-hairline: #29424b;
    --craft-glass-divider: #29424b;
    --craft-tertiary: rgba(255, 255, 255, 0.25);
    --craft-selection-ink: #0b171c;
    --craft-cal-pct: 30%;
    --cal-work-ink: #5fc6fa;
    --cal-team-ink: #db9dea;
    --cal-personal-ink: #6bdc42;
    --btn-fill: rgba(255, 255, 255, 0.2);
    --btn-ink: rgba(255, 255, 255, 0.85);
    --btn-edge: 0 0 0 0.5px rgba(255, 255, 255, 0.06), 0 0.5px 1px rgba(0, 0, 0, 0.3);
    --btn-disabled-ink: rgba(255, 255, 255, 0.25);
  }
}

/* ---------- Shell overrides ---------- */

.screen--craft .mac-window { height: 100%; background: var(--craft-paper); }
/* History.paper is ContentFill, a step lighter than `bg` in Dark. */
.screen--craft .history { background: var(--craft-paper); }
/* Craft's page inset is 32 (Theme.Craft.pageInset), not the Day page's 20. */
.screen--craft .history-content { padding: 32px; }

/* ---------- Page ---------- */

.screen--craft .craft {
  display: flex;
  flex-direction: column;
  gap: 24px; /* Theme.Craft.sectionGap */
}

/* Header: the wildflower field, white type, shaded at both ends. */
.screen--craft .craft-header {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  min-height: 132px;
  padding: 24px;
  border-radius: 16px;
  overflow: hidden;
  color: #ffffff;
  text-shadow: 0 1px 5px rgba(4, 18, 46, 0.46);
  background:
    linear-gradient(to right, rgba(6, 30, 64, 0.42), rgba(6, 30, 64, 0) 50%, rgba(6, 30, 64, 0.42)),
    url("../img/field-morning.jpg") center / cover no-repeat;
}
.screen--craft .craft-header__week,
.screen--craft .craft-header__focus {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.screen--craft .craft-header__focus { align-items: flex-end; }
.screen--craft .craft-header__label { font-size: 13px; line-height: 19px; }
.screen--craft .craft-header__dates {
  font-size: 28px; line-height: 34px; font-weight: 400; letter-spacing: -0.34px;
}
.screen--craft .craft-header__eyebrow {
  font-size: 10px; line-height: 13px; font-weight: 500; letter-spacing: 0.45px;
}
.screen--craft .craft-header__value {
  font-size: 17px; line-height: 23px; font-weight: 600; letter-spacing: -0.14px;
  font-variant-numeric: tabular-nums;
}

.screen--craft .craft-lead {
  margin: 0;
  font-size: 13px;
  line-height: 19px;
  color: var(--muted-ink);
}

.screen--craft .craft-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Filter menus: control pills, closed. */
.screen--craft .craft-filters {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  height: 28px;
}
.screen--craft .pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--fill-5);
  font-size: 12px;
  line-height: 16px;
  color: var(--ink);
}
.screen--craft .pill .lucide { flex: none; }
.screen--craft .pill__icon { width: 14px; height: 14px; }
.screen--craft .pill__chevron { width: 20px; height: 20px; color: var(--craft-tertiary); }
/* SteadyWidthText: as wide as the widest value the pill can show. */
.screen--craft .pill__text { display: inline-grid; }
.screen--craft .pill__text > span { grid-area: 1 / 1; white-space: nowrap; }
.screen--craft .pill__reserve { visibility: hidden; }

.screen--craft .craft-workspace {
  display: flex;
  align-items: flex-start;
  gap: 12px; /* Theme.Craft.workspaceGap */
}

/* ---------- Week canvas ---------- */

.screen--craft .week {
  flex: 1;
  min-width: 624px;
  padding: 12px;
  border-radius: 10px;
  background: var(--card);
  box-shadow: inset 0 0 0 0.5px var(--craft-glass-hairline);
}
.screen--craft .week__head {
  display: grid;
  grid-template-columns: 42px repeat(5, 1fr);
  height: 54px;
}
.screen--craft .week__day {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.screen--craft .week__day.is-highlighted {
  background: color-mix(in srgb, var(--craft-interactive) 3.5%, transparent);
}
.screen--craft .week__wd {
  font-size: 10px; line-height: 13px; font-weight: 500; letter-spacing: 0.45px;
  color: var(--craft-tertiary);
}
.screen--craft .week__date {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 12px; line-height: 16px; font-weight: 500;
  color: var(--ink);
}
.screen--craft .week__day.is-highlighted .week__date {
  background: var(--craft-interactive);
  color: var(--craft-selection-ink);
}
.screen--craft .week__divider { height: 0.5px; background: var(--craft-glass-divider); }

/* Hours 8:30 AM to 7:30 PM: 9–5 working hours stretched to Friday's
   6–7 PM dinner, 30 minutes of room each end, 56pt an hour. */
.screen--craft .week__body {
  display: grid;
  grid-template-columns: 42px 1fr;
  height: 616px;
}
.screen--craft .week__times {
  position: relative;
  box-shadow: inset -0.5px 0 0 var(--craft-glass-divider);
}
.screen--craft .week__times span {
  position: absolute;
  left: 18px;
  top: calc((var(--h) - 8.5) * 56px);
  transform: translate(-50%, -50%);
  font-family: var(--font-mono);
  font-size: 9px;
  line-height: 12px;
  font-weight: 300;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--craft-tertiary);
}
.screen--craft .week__tracks {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}
.screen--craft .week__grid { position: absolute; inset: 0; }
.screen--craft .week__grid i {
  position: absolute;
  left: 0;
  right: 0;
  top: calc((var(--h) - 8.5) * 56px);
  height: 0.5px;
  background: var(--hairline);
}
.screen--craft .week__track { position: relative; overflow: hidden; }
.screen--craft .week__track + .week__track {
  box-shadow: inset 0.5px 0 0 var(--craft-glass-divider);
}
.screen--craft .week__track.is-highlighted {
  background: color-mix(in srgb, var(--craft-interactive) 2.5%, transparent);
}

/* ---------- Blocks (CraftCalendarBlock) ---------- */

.screen--craft .cal-work { --cal: var(--cal-work); --cal-ink: var(--cal-work-ink); }
.screen--craft .cal-team { --cal: var(--cal-team); --cal-ink: var(--cal-team-ink); }
.screen--craft .cal-personal { --cal: var(--cal-personal); --cal-ink: var(--cal-personal-ink); }

.screen--craft .blk {
  position: absolute;
  left: 3px;
  right: 3px;
  top: calc((var(--s) - 8.5) * 56px);
  height: calc((var(--e) - var(--s)) * 56px);
  display: flex;
  align-items: flex-start;
  gap: 4px;
  padding: 4px;
  border-radius: 6px;
  overflow: hidden;
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
}
.screen--craft .blk[style*="width"] { right: auto; }
/* Leading rule, in the calendar's colour or the state's. */
.screen--craft .blk::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--rule, transparent);
}
/* Stroke border, drawn over the rule. */
.screen--craft .blk::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 6px;
  box-shadow: inset 0 0 0 var(--stroke-w, 0) var(--stroke, transparent);
  pointer-events: none;
}
.screen--craft .blk > * { position: relative; z-index: 1; }
.screen--craft .blk.is-inactive { opacity: 0.28; }

.screen--craft .blk--scheduled {
  background: color-mix(in srgb, var(--cal) var(--craft-cal-pct), transparent);
  color: var(--cal-ink);
  --rule: var(--cal);
}
.screen--craft .blk--out {
  background: var(--craft-warning-fill);
  color: var(--craft-warning);
}
.screen--craft .blk--in {
  background: color-mix(in srgb, var(--craft-interactive) 11%, transparent);
  color: var(--craft-interactive);
  --rule: var(--cal);
  --stroke: var(--craft-interactive);
  --stroke-w: 1px;
}
.screen--craft .blk--hold {
  color: var(--ink);
  background:
    radial-gradient(circle at 0.75px 0.75px,
      color-mix(in srgb, var(--craft-purple) 40%, transparent) 0.75px, transparent 0.8px)
      6px 5px / 8px 8px,
    color-mix(in srgb, var(--craft-purple) 20%, transparent);
  --rule: var(--craft-purple);
  --stroke: var(--craft-purple);
  --stroke-w: 1px;
}

/* A proposed move's source: dashed [4, 3] at 1.25pt. */
.screen--craft .blk__dash {
  position: absolute !important;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.screen--craft .blk__dash rect {
  x: 0.625px;
  y: 0.625px;
  width: calc(100% - 1.25px);
  height: calc(100% - 1.25px);
  rx: 5.4px;
  fill: none;
  stroke: var(--craft-warning);
  stroke-width: 1.25px;
  stroke-dasharray: 4 3;
}

.screen--craft .blk__num {
  flex: none;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  font-size: 10px;
  line-height: 13px;
  font-weight: 500;
  letter-spacing: 0.45px;
  text-indent: 0.45px;
}
.screen--craft .blk--out .blk__num { background: var(--card); color: var(--craft-warning); }
.screen--craft .blk--in .blk__num {
  background: var(--craft-interactive);
  color: var(--craft-selection-ink);
}
.screen--craft .blk__title { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.screen--craft .blk--out .blk__title { white-space: nowrap; }
.screen--craft .blk .ki {
  width: 11px;
  height: 11px;
  vertical-align: -1.5px;
}

/* ---------- Guided review (CraftReviewPanel) ---------- */

.screen--craft .review {
  flex: none;
  width: 360px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 16px;
  background: var(--fill-5);
}
.screen--craft .review__meta { display: flex; flex-direction: column; gap: 4px; }
.screen--craft .review__eyebrow {
  font-size: 10px; line-height: 13px; font-weight: 500; letter-spacing: 0.45px;
  color: var(--craft-tertiary);
}
.screen--craft .review__count {
  font-family: var(--font-mono);
  font-size: 11px; line-height: 16px;
  font-variant-numeric: tabular-nums;
  color: var(--muted-ink);
}
.screen--craft .review__card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  border-radius: 16px;
  background: var(--card);
  box-shadow: inset 0 0 0 0.5px var(--craft-glass-hairline);
}
.screen--craft .review__title {
  margin: 0;
  font-size: 17px; line-height: 23px; font-weight: 600; letter-spacing: -0.14px;
  color: var(--ink);
}
.screen--craft .review__move {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 0;
}
.screen--craft .review__label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px; line-height: 16px; font-weight: 500;
  color: var(--ink);
}
.screen--craft .review__label .sf {
  flex: none;
  width: 14px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.screen--craft .review__hold .sf { width: 16px; }
.screen--craft .review__route { font-size: 12px; line-height: 16px; color: var(--muted-ink); }
.screen--craft .review__observation {
  font-size: 10px; line-height: 13px; font-weight: 500; letter-spacing: 0.45px;
  color: var(--craft-warning);
}
.screen--craft .review__evidence {
  margin: 0;
  font-size: 13px; line-height: 19px;
  color: var(--muted-ink);
}
.screen--craft .review__choices { display: flex; gap: 8px; }
.screen--craft .review__nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 28px;
}
.screen--craft .review__finish { display: flex; justify-content: flex-end; }

/* macOS push buttons, regular size: .bordered and .borderedProminent. */
.screen--craft .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  min-width: 56px;
  padding: 0 11px;
  border-radius: 6px;
  font-size: 13px;
  line-height: 16px;
  background: var(--btn-fill);
  box-shadow: var(--btn-edge);
  color: var(--btn-ink);
}
.screen--craft .btn--prominent {
  background: var(--craft-tint);
  color: #ffffff;
  box-shadow: 0 0.5px 1.5px rgba(0, 0, 0, 0.18);
}
.screen--craft .btn.is-disabled { color: var(--btn-disabled-ink); }
.screen--craft .btn--prominent.is-disabled {
  background: var(--btn-fill);
  box-shadow: var(--btn-edge);
}