/* White, hairlines, air. No shadows, no rounding, no colour except the clothes.
   The garment cut-outs are the only images in the app and everything else gets
   out of their way. */

:root {
  --ink: #111;
  --muted: #9a9a9a;
  --line: #ebebeb;
  --pad: 20px;
  --nav: 56px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  /* Kills the double-tap-to-zoom gesture, and with it the ~300ms the browser
     spends waiting to find out whether a tap was the first half of one. Every
     tap in the app lands that much sooner. */
  touch-action: manipulation;
}

/* A home-screen app does not have a page you can select and drag. The only
   places text should be selectable are the ones you type into. */
body {
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: contain;
}

input, textarea { -webkit-user-select: text; user-select: text; }

body {
  background: #fff;
  color: var(--ink);
  font: 400 15px/1.45 -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  padding-bottom: calc(var(--nav) + env(safe-area-inset-bottom));
}

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* --- chrome ----------------------------------------------------------- */

.head {
  padding: 28px var(--pad) 18px;
  border-bottom: 1px solid var(--line);
  position: relative;
}

/* Sits opposite the heading, on the heading's own line rather than the
   eyebrow's — the eyebrow is the shorter of the two and a control level with it
   reads as belonging to it. */
.head-corner {
  position: absolute;
  right: var(--pad);
  bottom: 20px;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.avatar-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  overflow: hidden;
  background: #fafafa center/cover no-repeat;
  border: 1px solid var(--line);
  /* The fallback is the initial, so it must not be shouty when there is no
     picture yet — which is the state every new account starts in. */
  font-size: 14px;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
}

h1 { font-size: 28px; font-weight: 500; letter-spacing: -0.02em; }

.eyebrow {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
  min-height: 14px;
}

/* Sits on the date's line, at the date's weight. It is a glyph and not the word
   "refresh" because the eyebrow is already a line of small caps, and a second
   word there would read as part of the date. */
/* The glyph is 13px; the thing you tap is 44px.
 *
 * At 17px square it was very nearly unhittable on a phone — 44 is Apple's
 * floor for a reason. The padding does the work and the negative margins keep
 * it from pushing the date's line apart, so the target is bigger than it
 * looks, which is the right way round. */
#refresh {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  width: 44px;
  height: 44px;
  margin: -16px -14px -16px 0;
  color: var(--muted);
}

#refresh:active { color: var(--ink); }

#refresh svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#refresh.spinning svg { animation: spin 0.7s linear infinite; }

@keyframes spin { to { transform: rotate(360deg); } }

.body { padding: var(--pad); }

#nav {
  position: fixed;
  inset: auto 0 0 0;
  height: calc(var(--nav) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  display: flex;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
}

#nav button {
  flex: 1;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

#nav button.on { color: var(--ink); }

/* --- shared ------------------------------------------------------------ */

.label {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.action {
  display: block;
  width: 100%;
  padding: 15px;
  border: 1px solid var(--ink);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
}

.action.quiet { border-color: var(--line); color: var(--muted); }
.action:disabled { opacity: 0.35; }

/* Red is the only colour in the app that is not a garment, and it is spent
   here — on the one action that cannot be taken back. */
.action.danger { border-color: #c0392b; color: #c0392b; }

.danger-label { margin: 40px 0 8px; color: #c0392b; }
.danger-note { margin-top: 10px; color: var(--muted); }

/* You */

.you-head { display: flex; align-items: center; gap: 14px; margin-bottom: 32px; }
.avatar-lg { width: 72px; height: 72px; font-size: 26px; flex: none; }
.you-name { font-size: 17px; margin-bottom: 3px; }

.linky {
  font-size: 12px;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* The row is the view-as switch, so Delete has to sit clear of it and be
   unmistakably its own target rather than a corner of the row. */
.person { position: relative; padding-right: 64px; }

/* Not `.drop` — that name is already the archive's drag-here-to-delete strip,
   and reusing it inherited a full-width block that shoved the name aside. */
.person .person-drop {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  padding: 8px 0 8px 16px;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #c0392b;
}

.empty {
  padding: 64px 0;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}

.spinner {
  width: 18px; height: 18px;
  margin: 0 auto 14px;
  border: 1px solid var(--line);
  border-top-color: var(--ink);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* --- today ------------------------------------------------------------- */

.shot {
  width: 100%;
  display: block;
  margin-bottom: var(--pad);
  background: #fafafa;
}

/* You, cut out of the room. Contained rather than cropped — a full-length shot
   and a waist-up one should both sit whole on the page. */
.figure {
  display: block;
  width: 100%;
  max-height: 62vh;
  object-fit: contain;
  margin-bottom: var(--pad);
}

.look + .look { border-top: 1px solid var(--line); padding-top: var(--pad); }

.drop {
  display: block;
  width: 100%;
  padding: 11px;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--pad);
}

/* Hairlines are drawn on the cells, not as gaps over a coloured container:
   a part-full last row would otherwise leave a grey slab where cells are
   missing. */
.rack {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  margin-bottom: var(--pad);
}

.rack .cell {
  padding: 12px 8px;
  text-align: center;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.rack img {
  width: 100%;
  height: 82px;
  object-fit: contain;
  display: block;
  margin-bottom: 8px;
}

.rack .name {
  font-size: 11px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.rack .sub { font-size: 10px; color: var(--muted); margin-top: 2px; }

.tag {
  display: inline-block;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid var(--line);
  padding: 1px 5px;
  margin-top: 5px;
  color: var(--muted);
}

.tag.new { border-color: var(--ink); color: var(--ink); }

/* a "is this the same thing you already own?" prompt */
.ask {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  margin-bottom: 10px;
}

.ask img { width: 44px; height: 44px; object-fit: contain; flex: none; }
.ask .txt { flex: 1; font-size: 12px; line-height: 1.35; }
.ask .txt em { font-style: normal; color: var(--muted); }

.ask button {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid var(--ink);
  padding: 8px 11px;
  flex: none;
}

/* --- wardrobe ---------------------------------------------------------- */

.group { margin-bottom: 28px; }
.group > .label { margin-bottom: 10px; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.grid .cell {
  padding: 14px 8px 12px;
  text-align: center;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.grid img {
  width: 100%;
  height: 96px;
  object-fit: contain;
  display: block;
  margin-bottom: 10px;
}

/* Two lines, then ellipsis. Names are the whole reason this app calls anything
   "raspberry pink hoodie" instead of "top", so a single nowrap line that cuts
   it to "raspberry pink …" throws away what it was for. */
.grid .name {
  font-size: 11px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
}

.grid .worn { font-size: 10px; color: var(--muted); margin-top: 3px; }

/* --- archive ----------------------------------------------------------- */

/* Every silhouette in one run, newest first, no day headings — the date lives
   in the info sheet now. Five to a row, overlapping slightly, so a month reads
   as a rail of clothes rather than a spreadsheet of thumbnails. */
.figure-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  row-gap: 10px;
  padding: 14px 0;
}

/* The overlap. Negative margins on both sides make each figure wider than its
   track, so neighbours bleed into each other — the cut-outs are transparent,
   so what overlaps is clothing against clothing and not two white boxes.
   Later figures sit on top, which puts the newest in front. */
.figure-grid .figure-cell {
  height: 168px;
  max-width: none;
  margin: 0 -14%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: none;
}

.figure-grid .figure-cell img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* A tap should look like it landed. */
.figure-grid .figure-cell:active img { opacity: 0.55; }

/* Several looks in a day sit side by side, each scaled to the same height so
   the row reads as one strip regardless of how each photo was framed. */
.figures { display: flex; gap: 10px; align-items: flex-end; }

.figure-cell {
  flex: 0 0 auto;
  height: 210px;
  max-width: 46%;
}

.figure-cell img { height: 100%; width: auto; max-width: 100%; object-fit: contain; }
.figure-cell img.raw { object-fit: cover; width: 100px; }

/* --- sheet ------------------------------------------------------------- */

/* Above the editor, not below it. "Mark a piece" asks what you painted while
   the editor is still up, and at z-index 10 that question opened behind the
   editor's z-index 30 — you painted, pressed Save, and nothing happened. The
   sheet is always a response to something, so it belongs on top of everything
   except the toast that confirms it. */
#sheet { position: fixed; inset: 0; z-index: 50; }
.sheet-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.18); }

.sheet-panel {
  position: absolute;
  inset: auto 0 0 0;
  max-height: 88vh;
  overflow-y: auto;
  background: #fff;
  border-top: 1px solid var(--line);
  padding: var(--pad);
  padding-bottom: calc(var(--pad) + env(safe-area-inset-bottom));
}

.sheet-panel h2 { font-size: 20px; font-weight: 500; letter-spacing: -0.01em; }

.field {
  width: 100%;
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  font: inherit;
  background: none;
  margin-bottom: 18px;
}

.field:focus { outline: none; border-bottom-color: var(--ink); }

.picker { display: flex; flex-wrap: wrap; gap: 6px; }

.picker button {
  padding: 9px 12px;
  border: 1px solid var(--line);
  font-size: 11px;
  color: var(--muted);
}

.picker button.on { border-color: var(--ink); color: var(--ink); }

.covers { display: flex; gap: 8px; flex-wrap: wrap; }

.pick {
  width: 62px;
  height: 62px;
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
}

.pick.on { border-color: var(--ink); }
.pick img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pick span { color: var(--muted); font-size: 18px; }

.row { display: flex; gap: 8px; margin-top: 10px; }
.row > * { flex: 1; }

.wear {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}

.wear .s {
  color: var(--muted);
  font-size: 11px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.wear .s button {
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid var(--line);
  padding: 4px 7px;
  color: var(--muted);
}

/* --- the brush --------------------------------------------------------- */

/* White, like the rest of the app. The photo is the only thing with colour in
   here, which is the point — the mask has to be judged against it. */
#editor {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: #fff;
  display: flex;
  flex-direction: column;
  color: var(--ink);
}

/* `hidden` is a browser rule of the lowest possible weight, and `#editor` above
   is an id — so `display: flex` beat it and the editor never actually left the
   screen. It closed logically, stayed visually, and swallowed every tap on a
   dead canvas underneath. Anything that sets `display` on an element it also
   hides needs this line. */
#editor[hidden] { display: none; }

.ed-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px var(--pad);
  padding-top: calc(14px + env(safe-area-inset-top));
  border-bottom: 1px solid var(--line);
  flex: none;
}

.ed-bar button {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.ed-bar #ed-save { color: var(--ink); }
.ed-bar #ed-save:disabled { color: var(--muted); }
.ed-bar span { font-size: 12px; color: var(--muted); }

.ed-stage {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  overflow: hidden;
}

#ed-view { display: block; width: 100%; height: 100%; }

.ed-tools {
  flex: none;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px var(--pad);
  padding-bottom: calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
}

.ed-modes { display: flex; border: 1px solid var(--line); flex: none; }

.ed-modes button {
  padding: 9px 14px;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.ed-modes button.on { background: var(--ink); color: #fff; }

#ed-radius { flex: 1; min-width: 0; accent-color: var(--ink); }

.ed-undo {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  flex: none;
}

.ed-undo:disabled { opacity: 0.3; }

/* The little "e". Sits in the corner of the thing it edits — no circle, no
   chrome, just a mark you can find when you want it and ignore when you don't. */
.edit {
  position: absolute;
  top: 3px;
  right: 5px;
  font-size: 12px;
  font-style: italic;
  line-height: 1;
  padding: 3px 4px;
  color: var(--muted);
  background: none;
}

.edit.corner { top: auto; bottom: 2px; right: 2px; }

.rack .cell, .grid .cell, .figure-cell { position: relative; }

.look-tools { display: flex; gap: 8px; margin-bottom: var(--pad); }
.look-tools button {
  flex: 1;
  padding: 11px;
  border: 1px solid var(--line);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* --- signing in, and you ------------------------------------------------ */

#gate {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--pad);
}

#gate[hidden] { display: none; }   /* see the note on #editor[hidden] */

.gate-inner { width: 100%; max-width: 300px; }
.gate-inner h1 { font-size: 28px; font-weight: 500; letter-spacing: -0.02em; }
.gate-note { font-size: 13px; color: var(--muted); margin: 8px 0 26px; }

.gate-tabs { display: flex; border-bottom: 1px solid var(--line); margin-bottom: 22px; }

.gate-tabs button {
  flex: 1;
  padding: 11px 0;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid transparent;
  margin-bottom: -1px;
}

.gate-tabs button.on { color: var(--ink); border-bottom-color: var(--ink); }

.gate-error { font-size: 12px; color: #c0392b; margin-top: 14px; }

#gate-face { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
#gate-face[hidden] { display: none; }
#gate-face .s { color: var(--muted); font-size: 12px; }
#gate-avatar { font-size: 22px; }

.people { display: flex; flex-direction: column; }

.person {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  width: 100%;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

.person .who { font-size: 14px; }
.person .s { font-size: 11px; color: var(--muted); }
.person.on .who { font-weight: 600; }

.note { padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.note .s { font-size: 10px; color: var(--muted); margin-bottom: 4px; }

textarea.field { resize: vertical; font: inherit; }

/* --- toast ------------------------------------------------------------- */

.streak {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

/* Alive but unfed. Ink rather than red — this is a nudge, not an error. */
.streak.at-risk { color: var(--ink); }

/* The app's own yes/no. Above the sheet that asked, so the menu stays put
   underneath and saying no puts you back where you were. */
.sure { position: fixed; inset: 0; z-index: 58; }

.sure-backdrop { position: absolute; inset: 0; background: rgba(255, 255, 255, 0.86); }

.sure-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  border-top: 1px solid var(--line);
  padding: 24px var(--pad) calc(24px + env(safe-area-inset-bottom));
}

.sure-q { font-size: 15px; margin-bottom: 20px; }
.sure-panel .action + .action { margin-top: 10px; }

/* Cropper */

#cropper {
  position: fixed;
  inset: 0;
  z-index: 55;             /* over the sheet, under the toast */
  background: #fff;
  display: flex;
  flex-direction: column;
}

/* Load-bearing, exactly like #editor[hidden]: `display: flex` above beats the
   browser's own [hidden] rule, and without this the cropper stays on screen
   after it closes, eating every tap on a dead canvas. */
#cropper[hidden] { display: none; }

.crop-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px var(--pad);
  border-bottom: 1px solid var(--line);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.crop-bar button { font: inherit; letter-spacing: inherit; color: var(--ink); }
.crop-bar #crop-cancel { color: var(--muted); }

#crop-stage {
  position: relative;
  flex: 1;
  overflow: hidden;
  touch-action: none;      /* the drag is ours, not the browser's */
}

#crop-canvas { position: absolute; inset: 0; }

/* The hairline circle. Its size and position come from JS, not from here — the
   same `ring()` that decides what gets exported also places this, so the ring
   you see and the crop you get cannot drift apart. */
#crop-ring {
  position: absolute;
  border: 1px solid var(--ink);
  border-radius: 50%;
  pointer-events: none;
}

.crop-tools { padding: 20px var(--pad) calc(24px + env(safe-area-inset-bottom)); }
.crop-tools input { width: 100%; }

#toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--nav) + 20px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  background: var(--ink);
  color: #fff;
  font-size: 12px;
  padding: 10px 16px;
  z-index: 60;   /* the last word: above the sheet that triggered it */
  white-space: nowrap;
}