/* The spec sheet workspace: panels (islands) in a main column, with the
 * fit check alongside on wide screens. */
@layer reset, tokens, base, layout, components, utilities, print;

@layer components {
  /* Layout: placement and print locations side by side when there's room,
     with "Will it fit?" alongside on the widest screens; stacked on phones. */
  .workspace { display: grid; gap: 0 var(--space-5); grid-template-columns: minmax(0, 1fr);
               grid-template-areas: "details" "pair" "artwork" "jobs" "fit" "finishing"; }
  .workspace-details { grid-area: details; }
  .workspace-pair { grid-area: pair; min-width: 0; }
  .workspace-artwork { grid-area: artwork; min-width: 0; }
  .workspace-jobs { grid-area: jobs; }
  .workspace-finishing { grid-area: finishing; }
  .workspace-fit { grid-area: fit; }
  /* Desktop: placement and print locations are one panel (founder, 10 Nov
     2026): side by side inside one card, a line between them. Phones keep
     two panels. */
  @media (min-width: 56rem) {
    .workspace { grid-template-areas: "details" "pair" "artwork" "jobs" "fit" "finishing"; align-items: start; }
    .workspace-pair {
      display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: stretch;
      margin-block: var(--space-4); background: var(--glass); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
      border: 1px solid var(--glass-edge); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft);
    }
    .workspace-pair > div > .card { margin: 0; height: 100%; background: none; backdrop-filter: none; -webkit-backdrop-filter: none;
                                    border: 0; border-radius: 0; box-shadow: none; }
    .workspace-areas > .card { border-left: 1px solid var(--line); }
  }
  @media (min-width: 88rem) {
    .workspace { grid-template-columns: minmax(0, 1fr) 19rem;
                 grid-template-areas: "details fit" "pair fit" "artwork fit" "jobs fit" "finishing fit"; }
    .workspace-fit { position: sticky; top: 4.5rem; align-self: start; }
  }

  .panel { display: block; }
  .panel-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
  .panel-header h2 { margin: var(--space-1) 0 var(--space-3); }

  .facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-1) var(--space-5); font-size: var(--text-sm); }
  .facts dt { color: var(--muted); }

  .size-choices { display: flex; flex-wrap: wrap; gap: var(--space-2); }
  .size-choice { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-3);
                 border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--field); cursor: pointer; font-weight: var(--weight-regular); }
  .size-choice:has(input:checked) { background: var(--action); color: var(--action-ink); border-color: var(--action); }
  .size-choice input { margin: 0; }

  .area-row { display: flex; gap: var(--space-4); align-items: flex-start; justify-content: space-between;
              padding: var(--space-3) 0; border-top: 1px solid var(--line); }
  .area-row--editing { display: block; }
  .area-summary { display: flex; flex-direction: column; gap: 2px; font-size: var(--text-sm); }
  .area-summary strong { font-size: var(--text-md); }
  .area-size { font-variant-numeric: tabular-nums; }
  .area-editor { display: block; margin-top: var(--space-3); }
  .area-editor:has(form) { padding-top: var(--space-3); border-top: 1px solid var(--line); }
  .areas-table td { vertical-align: top; }
  .areas-table .area-size { white-space: nowrap; }
  .remove-area { margin-top: var(--space-3); color: var(--negative); }

  .fit { padding-block: var(--space-2); border-top: 1px solid var(--line); }
  .fit:first-of-type { border-top: none; }
  .fit h3 { margin: 0 0 var(--space-1); }
  .fit p { font-size: var(--text-sm); }
  .fit-table { width: 100%; }
  .fit-table td.fit-problem { color: var(--negative); font-weight: var(--weight-medium); }

  .size-chart input.short { width: 5rem; }
}

@layer components {
  /* Placement panel: prints on the garment drawing. */
  .placement-views { display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: center; }
  .placement-views figure { margin: 0; flex: 1 1 16rem; max-width: 26rem; text-align: center; }
  .placement-views figcaption { font-size: var(--text-xs); color: var(--muted); }
  .placement-svg { width: 100%; height: auto; overflow: visible; touch-action: none; user-select: none; }

  .printable { fill: none; stroke: var(--info); stroke-width: 1px; stroke-dasharray: 4 3; opacity: .7; vector-effect: non-scaling-stroke; }
  .print { cursor: grab; outline: none; }
  .print--dragging { cursor: grabbing; }
  /* Lines keep their on-screen weight at any drawing scale; text sizes come
     from each print's font-size attribute, scaled to the drawing. */
  .print-box { fill: rgb(122 167 255 / .14); stroke: #4c6fff; stroke-width: 1.2px; vector-effect: non-scaling-stroke; }
  .print--unsized .print-box { stroke-dasharray: 3 3; }
  .print:focus-visible .print-box, .print:hover .print-box { stroke-width: 2px; }
  .print--error .print-box { stroke: var(--negative); }
  .print-handle { fill: #fff; stroke: #4c6fff; stroke-width: 1.2px; vector-effect: non-scaling-stroke; cursor: nwse-resize; }
  .print text { font-family: var(--font-sans); paint-order: stroke; stroke: rgb(255 255 255 / .85); }
  .print-name { font-weight: 600; fill: #1f3fbf; }
  .print-size, .print-offset { fill: #1f3fbf; font-variant-numeric: tabular-nums; }
}

@layer components {
  /* Placement tabs: On the garment / Panels. */
  .tabs { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--radius-pill); background: var(--glass-strong); border: 1px solid var(--line); }
  .tab { padding: .3rem .85rem; border: none; border-radius: var(--radius-pill); background: none; color: var(--ink-soft);
         font-size: var(--text-xs); font-weight: var(--weight-medium); }
  .tab:hover { background: var(--solid); }
  .tab[aria-selected="true"] { background: var(--action); color: var(--action-ink); }
  .placement-svg--panels { display: block; width: 100%; max-height: 34rem; margin-inline: auto; }
  .placement-svg--panels .garment-panels { overflow: visible; }
}

@layer components {
  /* Changes waiting for departments to confirm. */
  .changes { border-left: 4px solid var(--warning); }
  .change { padding-block: var(--space-3); border-top: 1px solid var(--line); }
  .change header { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
  .change-lines { margin: var(--space-2) 0; font-size: var(--text-sm); }
  .change--rework .change-lines { color: var(--negative); }
  .change .button-row { margin-block: var(--space-2) 0; }
}

@layer components {
  /* Summary panels that link to the other page: the whole panel is the link. */
  .linked-panel { display: block; color: inherit; text-decoration: none; transition: box-shadow .15s, transform .15s; }
  .linked-panel:hover { box-shadow: var(--shadow-lift); transform: translateY(-1px); }
  .linked-panel h2 { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--ink) 25%, transparent); text-underline-offset: 4px; }
  .summary-columns { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); align-items: start; }
  @media (min-width: 48rem) { .summary-columns { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); } }
  .placement-preview { display: flex; gap: var(--space-2); min-width: 0; overflow: hidden; }
  .placement-preview .placement-svg { flex: 1 1 0; min-width: 0; width: 100%; height: auto; pointer-events: none; }
  /* A thumbnail: the table beside it gives the numbers. */
  .placement-preview .print-handle, .placement-preview .print text { display: none; }

  .job-cards { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
  .job-card { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3) var(--space-4);
              border-radius: var(--radius-md); background: var(--glass-strong); border: 1px solid var(--glass-edge);
              color: inherit; text-decoration: none; font-size: var(--text-sm); transition: box-shadow .15s; }
  .job-card:hover { box-shadow: var(--shadow-lift); }
  .job-card header { display: flex; gap: var(--space-2); align-items: center; justify-content: space-between; }
  .job-card--quote { opacity: .85; }
}

@layer components {
  /* Which garment the placement drawing shows, when a print goes on several. */
  .garment-switch { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block: var(--space-2) var(--space-3); }
  .garment-switch-option {
    padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); border: 1px solid var(--glass-edge);
    background: var(--glass-strong); color: var(--ink-soft); font-size: var(--text-sm); text-decoration: none;
  }
  .garment-switch-option[aria-current="true"] { background: var(--action); color: var(--action-ink); border-color: var(--action); }
  .garment-list td.actions { display: flex; gap: var(--space-3); justify-content: flex-end; }
  .button-row--tight { margin-block: 0; gap: var(--space-2); }
  .fit-garment { margin-top: var(--space-4); font-weight: var(--weight-medium); }
}

@layer components {
  /* A print's garments, one row each, with their sizes. */
  .size-matrix--garments th[scope="row"] { text-align: left; font-weight: var(--weight-regular); white-space: nowrap; padding-right: var(--space-3); }
  .size-matrix--garments tfoot th, .size-matrix--garments tfoot td { border-top: 1px solid var(--line); }
}

@layer components {
  /* Print sizes table rows and the Split panel. Each row of a location has
     its own colour (A, B, C...), used for its swatch, the size boxes that
     will land in it, and its summary chips. Colours are tokens below, so
     they can be changed in one place. */
  :root {
    --row-0-bg: #ecebfd; --row-0-ink: #3c3489;
    --row-1-bg: #e1f5ee; --row-1-ink: #085041;
    --row-2-bg: #fbe9e3; --row-2-ink: #712b13;
    --row-3-bg: #fbeaf0; --row-3-ink: #72243e;
    --row-4-bg: #faeeda; --row-4-ink: #633806;
    --row-5-bg: #e6f1fb; --row-5-ink: #0c447c;
  }
  [data-colour="0"] { --row-bg: var(--row-0-bg); --row-ink: var(--row-0-ink); }
  [data-colour="1"] { --row-bg: var(--row-1-bg); --row-ink: var(--row-1-ink); }
  [data-colour="2"] { --row-bg: var(--row-2-bg); --row-ink: var(--row-2-ink); }
  [data-colour="3"] { --row-bg: var(--row-3-bg); --row-ink: var(--row-3-ink); }
  [data-colour="4"] { --row-bg: var(--row-4-bg); --row-ink: var(--row-4-ink); }
  [data-colour="5"] { --row-bg: var(--row-5-bg); --row-ink: var(--row-5-ink); }

  .row-swatch { display: inline-block; width: .6rem; height: .6rem; margin-left: var(--space-1); border-radius: 50%;
                background: var(--row-bg); border: 1px solid var(--row-ink); vertical-align: middle; }
  .areas-table tr.row--split td:first-child { padding-left: var(--space-4); }
  .row-actions { white-space: nowrap; }
  .row-actions a + a { margin-left: var(--space-2); }

  .split-panel h3 { margin-top: var(--space-2); }
  .split-garment { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-block: var(--space-2); }
  .split-garment-name { min-width: 9rem; font-size: var(--text-sm); color: var(--ink-soft); }
  .split-size, .split-chip {
    display: inline-flex; align-items: center; gap: var(--space-1); padding: .2rem .6rem; border-radius: var(--radius-sm);
    background: var(--row-bg, var(--glass-strong)); color: var(--row-ink, var(--ink)); font-size: var(--text-sm);
  }
  .split-size { cursor: pointer; }
  .split-summary { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--line); }
  .split-summary-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); margin: var(--space-1) 0; font-size: var(--text-sm); }
}