/* ==========================================================================
   BİHAK Planner — visual language
   Palette is derived from the official logo: #122C43 (ink navy, the mark and
   the wordmark) and #8F9092 (the wing gradient and the "SOCIETY" line).
   No third colour is introduced. Contrast ratios on --paper are noted inline.
   ========================================================================== */

:root {
  /* --- ink scale (all AA or better on --paper) --- */
  --ink-900:    #0B1C2B;   /* 17.4:1  headings, week numerals              */
  --ink-700:    #122C43;   /* 14.2:1  LOGO NAVY — primary text and action  */
  --slate-600:  #4A5A6A;   /*  7.1:1  secondary text                       */
  --slate-500:  #5E6D79;   /*  4.9:1  muted text — the floor for body copy  */
  --grey-400:   #8F9092;   /*  3.2:1  LOGO GREY. Measured in the browser at
                                       2.96:1 for 11px labels, so it is NOT
                                       used for any text. Kept as a token
                                       for non-text marks only.            */

  /* --- surfaces and rules --- */
  --paper:       #F7F6F3;
  --paper-deep:  #EDEAE3;
  --surface:     #FFFFFF;
  --rule:        #D9DDE1;
  --rule-strong: #B4BDC6;
  --wash:        rgba(18, 44, 67, 0.035);
  --wash-firm:   rgba(18, 44, 67, 0.065);

  --danger:      #8C2F2F;   /* 8.3:1 — destructive confirmation only */

  /* --- type --- */
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
           Georgia, "Times New Roman", serif;
  --sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto,
           "Helvetica Neue", Arial, sans-serif;

  /* --- rhythm --- */
  --col-week: 104px;   /* numeral + its date range underneath (Phase 8.5) */
  --col-meta: 196px;
  --gutter:   18px;
  --indent:   calc(var(--col-week) + var(--gutter));

  /* --- motion: functional only, 150–220ms --- */
  --t-fast: 150ms;
  --t-med:  200ms;
  --ease:   cubic-bezier(0.2, 0.6, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-700);
  font: 15px/1.55 var(--sans);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { max-width: 100%; }
[hidden] { display: none !important; }

button, input, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }

/* Phase 8.5 — touch. No 300 ms double-tap-zoom wait on controls, and a quiet
   tap flash in the ink colour instead of the platform's blue. */
button, label, summary, [role="tab"], input[type="checkbox"] { touch-action: manipulation; }
html { -webkit-tap-highlight-color: rgba(18, 44, 67, 0.08); }

.icon { width: 16px; height: 16px; fill: none; stroke: currentColor;
        stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; border: 0; overflow: hidden; white-space: nowrap;
  clip-path: inset(50%);
}

:focus-visible {
  outline: 2px solid var(--ink-700);
  outline-offset: 2px;
  border-radius: 2px;
}
.edit-btn:focus-visible, .btn--primary:focus-visible {
  outline-color: var(--surface);
  outline-offset: -5px;
}

.wrap {
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: 32px;
}

/* --- eyebrow: the letterspaced small-caps voice borrowed from the logo's
       "S O C I E T Y" line. Used for every column and section label. ------- */
.eyebrow, .planner__head > *, .detail__title, .proto-note,
.masthead__semester, .event__type, .pool-item__type {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
}

/* An event type can be long ("SEMİNER / KONFERANS"); wide tracking that suits
   a one-word label makes a long one hard to read. */
.event__type, .pool-item__type, .choice__type { letter-spacing: 0.05em; }

/* ==========================================================================
   Prototype notice (Phase 1 only — removed when real data is connected)
   ========================================================================== */
.proto-note {
  background: var(--paper-deep);
  border-bottom: 1px solid var(--rule);
  color: var(--slate-600);            /* 5.9:1 on --paper-deep */
  text-align: center;
  padding: 7px 16px;
  padding-top: calc(7px + env(safe-area-inset-top, 0px));
  text-transform: none;
  letter-spacing: 0.04em;
  font-weight: 500;
}

/* ==========================================================================
   Masthead
   ========================================================================== */
.masthead { border-bottom: 1px solid var(--rule-strong); background: var(--paper); }

.masthead__inner {
  display: grid;
  grid-template-columns: auto 1px minmax(0, 1fr) auto;
  align-items: center;
  gap: 22px;
  padding-block: 20px;
}

.masthead__logo { width: 112px; height: auto; display: block; }

.masthead__rule { display: block; align-self: stretch; background: var(--rule); margin-block: 4px; }

.masthead__org {
  font: 400 21px/1.2 var(--serif);
  color: var(--ink-900);
  letter-spacing: 0.005em;
}

.masthead__semester { color: var(--slate-500); margin-top: 5px; }

.masthead__mode {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 600; color: var(--ink-700);
  white-space: nowrap;
}
.masthead__mode-dot { width: 7px; height: 7px; background: var(--ink-700); flex: none; }

/* ==========================================================================
   Loading and failure states
   The failure panel is deliberately plain and wordy: it has to tell the truth
   about what went wrong, not reassure.
   ========================================================================== */
.state { padding-block: 40px; }

.state--loading {
  color: var(--slate-500);
  font-size: 13.5px;
  text-align: center;
  padding-block: 64px;
}

.state--error {
  max-width: 560px;
  border: 1px solid var(--rule-strong);
  border-left: 2px solid var(--danger);
  border-radius: 2px;
  background: var(--surface);
  padding: 22px 24px 24px;
  margin-block: 40px;
}
.state__title  { font: 400 18px/1.3 var(--serif); color: var(--ink-900); margin-bottom: 8px; }
.state__body   { font-size: 14px; color: var(--ink-700); }
.state__hint   { font-size: 13px; color: var(--slate-600); margin-top: 10px; }
.state__detail {
  font: 11.5px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--slate-500);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 8px 10px;
  margin-top: 14px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.state--error .btn { margin-top: 16px; }

/* Sample-data banner — louder than the Phase 1 prototype note, because with a
   real backend available this mode is a deliberate detour. */
.proto-note--mock {
  background: #F1E9DA;
  border-bottom: 1px solid #C9BCA2;
  color: #6B5836;                      /* 5.6:1 on #F1E9DA */
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-weight: 600;
}

/* ==========================================================================
   Status bar
   ========================================================================== */
.statusbar {
  display: flex; flex-wrap: wrap; gap: 8px 20px;
  align-items: baseline; justify-content: space-between;
  padding-block: 18px 22px;
  font-size: 13px;
}
.statusbar__counts { color: var(--slate-500); }
.statusbar__counts b { font-weight: 600; color: var(--ink-700); }

/* Realtime connection state (Phase 7). Quiet by design: hidden whenever sync
   is healthy, same muted tone as the counts next to it — a fact, not a
   warning, since confirmed data on screen is still perfectly usable without
   live updates. */
.statusbar__sync { color: var(--slate-500); font-size: 12px; }

.statusbar__msg {
  /* Phase 8.5: the one-line result of an action used to sit at the top of the
     page — off-screen whenever the action happened in week 12. It now appears
     at the bottom edge, where the hand and the eye are, next to the edit
     control. Still one line, still no stacking. A success is gone after ~4 s;
     a failure that needs the user stays, with a close button. */
  display: flex; align-items: flex-start; gap: 10px;
  position: fixed; z-index: 45;
  left: max(24px, env(safe-area-inset-left, 0px));
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  max-width: min(560px, calc(100vw - 260px));
  background: var(--surface); border: 1px solid var(--rule-strong);
  border-left: 2px solid var(--ink-700); border-radius: 2px;
  padding: 10px 14px; font-size: 13.5px;
  color: var(--ink-700); font-weight: 500;
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(4px);
  transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease),
              visibility 0s linear var(--t-med);
}
.statusbar__msg.is-shown { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.statusbar__msg.is-warn { color: var(--danger); border-left-color: var(--danger); }
.statusbar__msg-text { flex: 1 1 auto; min-width: 0; }
.statusbar__msg-close {
  flex: none; pointer-events: auto; color: var(--slate-500);
  width: 24px; height: 24px; margin: -3px -6px -3px 0; display: grid; place-items: center; border-radius: 2px;
}
.statusbar__msg-close:hover { color: var(--ink-700); }

/* ==========================================================================
   Section head (shared by pool and any future section)
   ========================================================================== */
.section-head {
  display: flex; flex-wrap: wrap; gap: 4px 18px;
  align-items: baseline; justify-content: space-between;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 14px;
}
.section-head__title { font: 400 17px/1.3 var(--serif); color: var(--ink-900); }
.section-head__hint  { font-size: 12.5px; color: var(--slate-500); }

/* ==========================================================================
   Event pool
   ========================================================================== */
.pool { margin-bottom: 34px; }

.pool__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(224px, 1fr));
  gap: 10px;
}

.pool-item {
  /* position: relative is load-bearing (Phase 8.5): it makes the card the
     containing block of its visually-hidden action labels. Without it those
     absolutely-positioned spans escape the horizontal pool scroller on a phone
     and are laid out at the far-off-screen cards' positions — the document
     became 2,330 px wide and the browser widened the whole layout viewport. */
  position: relative;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-left: 2px solid var(--ink-700);
  border-radius: 2px;
  padding: 10px 13px 11px;
  transition: border-color var(--t-fast) var(--ease),
              transform   var(--t-fast) var(--ease),
              background  var(--t-fast) var(--ease);
}
.pool-item__type  { display: block; color: var(--slate-500); margin-bottom: 3px; }
.pool-item__title { display: block; font: 400 15.5px/1.35 var(--serif); color: var(--ink-900); }
.pool-item__desc {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 12.5px; color: var(--slate-500); margin-top: 3px; overflow-wrap: anywhere;
}
.pool-item__desc.is-expanded { display: block; -webkit-line-clamp: unset; overflow: visible; }
/* "Devamını göster" / "Kısalt" — only where text is really cut off. */
.desc-toggle {
  align-self: flex-start; margin-top: 2px; padding-block: 2px;
  font-size: 12.5px; font-weight: 600; color: var(--slate-600);
  text-decoration: underline; text-decoration-color: var(--rule-strong); text-underline-offset: 3px;
}
.desc-toggle:hover { color: var(--ink-700); text-decoration-color: var(--ink-700); }
/* Edit Mode: cards in a row share the tallest card's height and the actions
   sit on the bottom edge of each, so they line up across the pool. Read Mode
   has no actions to align: each card is as tall as its own content. */
.pool-item { display: flex; flex-direction: column; }
.pool-item .event-actions { margin-top: auto; padding-top: 8px; }
body:not(.is-editing) .pool__list { align-items: start; }

/* "+ Etkinlik ekle" on the pool — Edit Mode only */
.pool__add {
  display: none; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 600; color: var(--ink-700);
  border: 1px solid var(--rule-strong); border-radius: 2px; background: var(--surface);
  padding: 6px 12px; margin-left: auto;
  transition: border-color var(--t-fast) var(--ease);
}
.pool__add:hover { border-color: var(--ink-700); }
body.is-editing .pool__add { display: inline-flex; }

/* Edit Mode: the pool becomes tangible — grab affordance, a 1px lift, a firmer
   rule. No shadow bloom, no scaling, no colour change. */
body.is-editing .pool-item[draggable="true"] { cursor: grab; }
body.is-editing .pool-item:hover {
  border-color: var(--rule-strong);
  border-left-color: var(--ink-700);
  transform: translateY(-1px);
}
.pool-item.is-dragging { opacity: 0.4; cursor: grabbing; }

/* Return-to-pool target, shown only while dragging a scheduled event */
.pool__droptarget {
  display: none;
  margin-top: 10px; padding: 14px;
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  text-align: center; font-size: 13px; font-weight: 600; color: var(--slate-600);
  background: var(--wash);
}
body.is-dragging-scheduled .pool__droptarget { display: block; }
body.is-dragging-scheduled .pool__droptarget.is-over {
  border-color: var(--ink-700); color: var(--ink-700); background: var(--wash-firm);
}

.pool__empty { font-size: 13.5px; color: var(--slate-500); font-style: italic; }

/* ==========================================================================
   Planner — the editorial table. Fifteen rows, hairline rules, a numeral spine.
   ========================================================================== */
.planner__head {
  display: grid;
  grid-template-columns: var(--col-week) minmax(0, 1fr) var(--col-meta);
  gap: var(--gutter);
  color: var(--slate-500);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule-strong);
}
.planner__head-week { text-align: right; }
.planner__head-meta { text-align: right; }

.week { border-bottom: 1px solid var(--rule); }
.week:last-child { border-bottom: 0; }

.week__row {
  display: grid;
  grid-template-columns: var(--col-week) minmax(0, 1fr) var(--col-meta);
  grid-template-areas: "no event meta";
  gap: var(--gutter);
  align-items: start;
  padding-block: 15px;
  transition: background var(--t-fast) var(--ease);
}
.week:hover > .week__row { background: var(--wash); }

.week__no {
  grid-area: no;
  display: flex; flex-direction: column; align-items: flex-end;
  text-align: right;
  font: 400 21px/1.35 var(--serif);
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
  padding-top: 1px;
}
.week__no-word {
  font-family: var(--sans); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; font-weight: 600; color: var(--slate-500);
}
@media (min-width: 761px) { .week__no-word { position: absolute; clip-path: inset(50%); } }
.week__no-num { display: block; }
/* Secondary to the numeral on purpose: sans, small, muted, never competing. */
.week__dates {
  display: block; margin-top: 2px;
  font: 500 11.5px/1.35 var(--sans); color: var(--slate-500);
  letter-spacing: 0.01em; white-space: nowrap;
}
/* "Bu hafta": a word, not a badge — the ink colour and weight are the whole
   treatment. Derived from today's date (render.js currentWeek). */
.week__now {
  order: 3; margin-top: 3px;
  font: 600 11.5px/1.3 var(--sans); color: var(--ink-700); letter-spacing: 0.02em;
}

.week__event { grid-area: event; min-width: 0; position: relative; }

.event__type  { display: block; color: var(--slate-500); margin-bottom: 3px; }
.event__title { font: 400 17px/1.35 var(--serif); color: var(--ink-900); }
.event__desc  {
  font-size: 13px; color: var(--slate-500); margin-top: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.week.is-open .event__desc { white-space: normal; }

body.is-editing .week__event .event[draggable="true"] { cursor: grab; }
.event.is-dragging { opacity: 0.4; }

/* Event actions (Edit Mode only, Phase 8.5): quiet underlined words, never
   a row of buttons. They are the ONLY way to place/move an event on a phone,
   so on a touch screen each one gets a full 44 px tall hit area (below) while
   looking exactly the same. */
.event-actions {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 2px 18px; margin-top: 7px;
}
.event-action {
  font-size: 12.5px; font-weight: 600; color: var(--slate-600);
  text-decoration: underline; text-decoration-color: var(--rule-strong);
  text-decoration-thickness: 1px; text-underline-offset: 3px;
  padding-block: 3px;
  transition: color var(--t-fast) var(--ease), text-decoration-color var(--t-fast) var(--ease);
}
.event-action:hover { color: var(--ink-700); text-decoration-color: var(--ink-700); }
[draggable="true"] { -webkit-user-select: none; user-select: none; }

/* Quiet "+" on an empty week, Edit Mode only */
.week__add {
  display: none;
  align-items: center; gap: 8px;
  font-size: 13px; color: var(--slate-500);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 7px 12px;
  background: var(--surface);
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
body.is-editing .week--empty .week__add { display: inline-flex; }
.week__add:hover { color: var(--ink-700); border-color: var(--rule-strong); }
.week__add-plus { font-size: 15px; line-height: 1; }

/* Drag targets */
.week--empty.is-target > .week__row { background: var(--wash); }
.week--empty.is-over  > .week__row { background: var(--wash-firm); box-shadow: inset 2px 0 0 var(--ink-700); }
.week--filled.is-blocked > .week__row { background: rgba(140, 47, 47, 0.045); }
.week__blocked {
  display: none; font-size: 12px; font-weight: 600; color: var(--danger); margin-top: 5px;
}
.week--filled.is-blocked .week__blocked { display: block; }

/* Meta column */
.week__meta {
  grid-area: meta;
  display: flex; align-items: center; justify-content: flex-end; gap: 12px;
  padding-top: 2px;
}
.week__counts { font-size: 12px; color: var(--slate-500); text-align: right; }
.week__counts:empty { display: none; }
.week__counts > span { white-space: nowrap; }   /* "2 dosya" never splits across lines */

.week__expand {
  flex: none;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border: 1px solid transparent;
  border-radius: 2px;
  color: var(--slate-500);
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.week__expand:hover { color: var(--ink-700); border-color: var(--rule); }
/* Read Mode, nothing to open: no chevron (its space is kept, so rows align). */
.week--bare .week__expand { visibility: hidden; }
.week__expand .icon { transition: transform var(--t-med) var(--ease); }
.week.is-open .week__expand .icon { transform: rotate(180deg); }

/* --- expanding detail: grid-template-rows 0fr -> 1fr, no JS measurement ---- */
.week__detail {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-med) var(--ease);
}
.week.is-open .week__detail { grid-template-rows: 1fr; }
.week__detail-clip { overflow: hidden; min-height: 0; }

.week__detail-inner {
  /* flex, not a fixed three-track grid: in Read Mode an empty subsection is
     left out, and the ones that remain share the width. */
  display: flex;
  margin-left: var(--indent);
  padding-top: 7px;
  padding-bottom: 24px;
}
.detail-col { flex: 1 1 0; min-width: 0; }
.detail-col--notes { flex-grow: 1.15; }
.detail-col--files { flex-grow: 0.85; }
.detail-col + .detail-col {
  border-left: 1px solid var(--rule);
  margin-left: 22px; padding-left: 22px;
}
.detail__title { color: var(--slate-500); margin-bottom: 9px; }
.detail__title:focus { outline: none; }
.detail__title:focus-visible { outline: 2px solid var(--ink-700); outline-offset: 2px; }
.detail__empty { font-size: 13px; color: var(--slate-500); font-style: italic; }

/* Todos */
.todo { display: flex; align-items: flex-start; gap: 9px; padding-block: 4px; font-size: 13.5px; }
.todo__tick {
  flex: none; width: 13px; height: 13px; margin-top: 3px;
  border: 1px solid var(--rule-strong); border-radius: 1px; background: var(--surface);
}
.todo.is-done .todo__tick { background: var(--ink-700); border-color: var(--ink-700); }
.todo.is-done .todo__tick::after {
  content: ""; display: block; width: 6px; height: 3px; margin: 3px auto 0;
  border-left: 1.5px solid var(--surface); border-bottom: 1.5px solid var(--surface);
  transform: rotate(-45deg);
}
.todo.is-done .todo__text { text-decoration: line-through; color: var(--slate-500); }
.todo input[type="checkbox"] { accent-color: var(--ink-700); margin: 3px 0 0; flex: none; }
.todo__remove { color: var(--slate-500); margin-left: auto; padding: 2px; flex: none; }
.todo__remove:hover { color: var(--danger); }

.todo-add { display: flex; gap: 7px; margin-top: 9px; }
.todo-add input {
  flex: 1 1 auto; min-width: 0;
  border: 1px solid var(--rule); border-radius: 2px; background: var(--surface);
  padding: 6px 9px; font-size: 13.5px;
}
.todo-add input:focus { border-color: var(--rule-strong); }
.todo-add__error { font-size: 12.5px; color: var(--danger); margin-top: 6px; }
/* Inline delete confirmation, same pattern as a file row's. */
.todo.is-confirming { flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.todo__confirm-text { font-size: 12.5px; color: var(--danger); font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.todo__confirm-actions { margin-left: auto; display: flex; gap: 6px; flex: none; }

/* Notes */
.note__text { font-size: 13.5px; color: var(--slate-600); white-space: pre-wrap; }
.note__area {
  width: 100%; resize: vertical; min-height: 84px;
  border: 1px solid var(--rule); border-radius: 2px; background: var(--surface);
  padding: 8px 10px; font-size: 13.5px; line-height: 1.5; color: var(--ink-700);
}
.note__area:focus { border-color: var(--rule-strong); }
.note__save { font-size: 11.5px; color: var(--slate-500); margin-top: 6px; min-height: 1.2em; }
.note__save.is-error { color: var(--danger); font-weight: 600; }
.note__retry {
  color: var(--danger); font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
}

/* Attachments */
/* Three fixed roles: name (wraps), size (never split), remove (same place on
   every row, whatever the name's length). */
.file {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: baseline;
  column-gap: 10px; padding-block: 4px; font-size: 13.5px;
}
.file.is-confirming { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
/* A <button> that reads as a link: there is no URL until one is signed on
   demand, so an <a href> would be a lie. text-align matters because the global
   button reset does not set it and a long Turkish filename would otherwise
   centre itself. */
.file__link {
  color: var(--ink-700); text-decoration: underline; text-underline-offset: 2px;
  text-align: left; overflow-wrap: anywhere; min-width: 0; justify-self: start;
}
.file__link:hover { color: var(--ink-900); }
.file__link[disabled] { color: var(--slate-500); cursor: progress; text-decoration: none; }
.file__size { font-size: 11.5px; color: var(--slate-500); white-space: nowrap; font-variant-numeric: tabular-nums; }
.file__remove { color: var(--slate-500); padding: 2px; align-self: start; }
.file__remove:hover { color: var(--danger); }
.file-add { margin-top: 10px; }
/* The real file input is visually hidden; its keyboard focus is shown on the
   visible "Dosya ekle" label right after it. */
.file-add__input:focus-visible + .btn { outline: 2px solid var(--ink-700); outline-offset: 2px; border-color: var(--ink-700); }
.file-add__hint { font-size: 11.5px; color: var(--slate-500); margin-top: 6px; }
.file-add__error { font-size: 12px; color: var(--danger); margin-top: 6px; }
.file-add__status { font-size: 12px; color: var(--slate-500); margin-top: 6px; }
.file-add__status.is-error { color: var(--danger); }
/* Restrained on purpose: attachments stay secondary to notes, so the upload
   indicator is a hairline, not a component. */
.file-add__bar {
  display: block; width: 100%; max-width: 220px; height: 3px;
  margin-top: 8px; border: 0; border-radius: 2px;
  background: var(--rule); appearance: none; -webkit-appearance: none;
}
.file-add__bar::-webkit-progress-bar { background: var(--rule); border-radius: 2px; }
.file-add__bar::-webkit-progress-value { background: var(--ink-700); border-radius: 2px; }
.file-add__bar::-moz-progress-bar { background: var(--ink-700); border-radius: 2px; }

/* Inline delete confirmation — the row asks in place. No native confirm(),
   no modal stacked on a modal. */
.file__confirm-text { font-size: 12.5px; color: var(--danger); font-weight: 600; }
.file__confirm-actions { margin-left: auto; display: flex; gap: 6px; flex: none; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 2px; padding: 9px 15px; font-size: 13.5px; font-weight: 600;
  border: 1px solid var(--rule-strong); background: var(--surface); color: var(--ink-700);
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.btn:hover { border-color: var(--ink-700); }
.btn--primary { background: var(--ink-700); border-color: var(--ink-700); color: var(--surface); }
.btn--primary:hover { background: var(--ink-900); border-color: var(--ink-900); }
.btn--quiet { border-color: transparent; color: var(--slate-600); }
.btn--quiet:hover { border-color: var(--rule-strong); }
.btn--small { padding: 6px 11px; font-size: 12.5px; }

/* ==========================================================================
   Edit dock — lower-right, per spec
   ========================================================================== */
.edit-dock {
  position: fixed;
  right: max(24px, env(safe-area-inset-right, 0px));
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  z-index: 40;
}
.edit-btn {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--ink-700); color: var(--surface);
  border: 1px solid var(--ink-700); border-radius: 3px;
  padding: 12px 18px; font-size: 14px; font-weight: 600;
  min-height: 44px;
  transition: background var(--t-fast) var(--ease);
}
.edit-btn:hover { background: var(--ink-900); }
.edit-btn .icon--check { display: none; }
body.is-editing .edit-btn .icon--pencil { display: none; }
body.is-editing .edit-btn .icon--check { display: block; }
.edit-btn[disabled] { cursor: progress; opacity: 0.72; }
.edit-btn.is-locked { background: var(--surface); color: var(--slate-500);
                      border-color: var(--rule-strong); cursor: not-allowed; opacity: 1; }

/* Edit Mode is signalled by a 3px ink rule across the top of the page and the
   masthead indicator — nothing else changes colour. */
body.has-lease::before {
  content: ""; position: fixed; inset: 0 0 auto; height: 3px;
  background: var(--ink-700); z-index: 60;
}

/* ==========================================================================
   Dialog — native <dialog> for focus trap + Escape
   ========================================================================== */
.dialog {
  width: min(480px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain;
  border: 1px solid var(--rule-strong); border-radius: 3px;
  background: var(--surface); color: var(--ink-700);
  padding: 0; margin: auto;
}
.dialog::backdrop { background: rgba(11, 28, 43, 0.28); }

.dialog__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 18px 20px 14px; border-bottom: 1px solid var(--rule);
}
.dialog__title { font: 400 18px/1.25 var(--serif); color: var(--ink-900); }
.dialog__sub { font-size: 12.5px; color: var(--slate-500); margin-top: 3px; }
.dialog__close { width: 30px; height: 30px; display: grid; place-items: center;
                 color: var(--slate-500); border-radius: 2px; flex: none; }
.dialog__close:hover { color: var(--ink-700); }

.tabs { display: flex; gap: 0; border-bottom: 1px solid var(--rule); padding-inline: 20px; }
.tab {
  padding: 11px 2px; margin-right: 22px; font-size: 13.5px; font-weight: 600;
  color: var(--slate-500); border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.tab:hover { color: var(--ink-700); }
.tab[aria-selected="true"] { color: var(--ink-900); border-bottom-color: var(--ink-700); }

.panel { padding: 16px 20px 20px; }
.panel__hint { font-size: 12.5px; color: var(--slate-500); margin-bottom: 12px; }
.panel__empty { font-size: 13.5px; color: var(--slate-500); font-style: italic; }

.choice-list { max-height: 280px; overflow-y: auto; }
.choice {
  display: block; width: 100%; text-align: left;
  border: 1px solid var(--rule); border-left: 2px solid var(--ink-700);
  border-radius: 2px; background: var(--surface);
  padding: 9px 12px; margin-bottom: 7px;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.choice:hover { border-color: var(--rule-strong); background: var(--wash); }
.choice__type  { display: block; font-size: 11px; letter-spacing: 0.1em;
                 text-transform: uppercase; font-weight: 600; color: var(--slate-500); }
.choice__title { display: block; font: 400 15px/1.35 var(--serif); color: var(--ink-900); margin-top: 2px; }

/* "Hangi hafta?" picker (Phase 8.5): a ruled list, numeral-first, like the
   planner. Fixed columns — number, dates, availability — so a date never
   breaks into fragments; an occupied week names its event on a second line. */
.week-choice-list { max-height: 52vh; overflow-y: auto; margin-inline: -4px; padding-inline: 4px; }
.week-choice {
  display: grid; grid-template-columns: 4.6em auto minmax(0, 1fr);
  grid-template-areas: "no dates state" ". occ occ";
  align-items: baseline; column-gap: 12px; row-gap: 1px;
  width: 100%; text-align: left; min-height: 42px;
  padding: 9px 10px; border-bottom: 1px solid var(--rule);
  transition: background var(--t-fast) var(--ease);
}
.week-choice:hover:not([disabled]) { background: var(--wash); }
.week-choice__no    { grid-area: no; font: 400 15px/1.3 var(--serif); color: var(--ink-900); white-space: nowrap; }
.week-choice__dates { grid-area: dates; font-size: 13px; color: var(--slate-600); white-space: nowrap; }
.week-choice__state { grid-area: state; justify-self: end; font-size: 12.5px; font-weight: 600;
                      color: var(--ink-700); white-space: nowrap; }
.week-choice__occupant { grid-area: occ; min-width: 0; font-size: 12.5px; color: var(--slate-500);
                         overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.week-choice.is-taken { cursor: default; }
.week-choice.is-taken .week-choice__no,
.week-choice.is-taken .week-choice__dates { color: var(--slate-500); }
.week-choice.is-taken .week-choice__state { font-weight: 400; color: var(--slate-500); font-style: italic; }

/* The picker's head stays in view while the list scrolls: title, the event
   being placed, the way out. Nothing else is sticky. */
.dialog--picker .dialog__head { position: sticky; top: 0; z-index: 1; background: var(--surface); }
.picker__context { min-width: 0; }
.picker__event { font: 400 15px/1.35 var(--serif); color: var(--ink-900); margin-top: 3px; overflow-wrap: anywhere; }
.picker__desc  { font-size: 13px; color: var(--slate-500); margin-bottom: 8px;
                 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker__stays { font-size: 13px; color: var(--slate-600); margin-bottom: 10px; }

.field { margin-bottom: 14px; }
.field__label { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 5px; }
.field__optional { font-weight: 400; color: var(--slate-500); }
.field__input {
  width: 100%; border: 1px solid var(--rule); border-radius: 2px;
  background: var(--surface); padding: 8px 10px; font-size: 14px;
}
.field__input:focus { border-color: var(--rule-strong); }
.field__input--area { resize: vertical; line-height: 1.5; }
.field__input[aria-invalid="true"] { border-color: var(--danger); }
.field__error { font-size: 12px; color: var(--danger); margin-top: 5px; }

.dialog__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.form-error { font-size: 13px; color: var(--danger); font-weight: 600; margin-top: 4px; }
.dialog[data-pending] .btn--primary { cursor: progress; opacity: 0.8; }

/* ==========================================================================
   Colophon
   ========================================================================== */
.colophon {
  margin-top: 40px; padding-block: 18px 40px;
  border-top: 1px solid var(--rule);
  font-size: 12.5px; color: var(--slate-500);
}

/* The edit dock is fixed, so the page must be able to scroll clear of it. */
#main { padding-bottom: 40px; }

/* ==========================================================================
   Narrow / mobile — stack each week, preserve Week -> Event -> Details.
   Four columns are never squeezed.
   ========================================================================== */
@media (max-width: 760px) {
  .wrap { padding-inline: 18px; }

  .masthead__inner { grid-template-columns: auto minmax(0, 1fr); gap: 16px; padding-block: 16px; }
  .masthead__logo { width: 88px; }
  .masthead__rule { display: none; }
  .masthead__org { font-size: 18px; }
  .masthead__mode { grid-column: 1 / -1; }

  .statusbar { padding-block: 14px 18px; }
  /* just above the full-width edit button */
  .statusbar__msg {
    left: 18px; right: 18px; max-width: none;
    bottom: calc(18px + 52px + 10px + env(safe-area-inset-bottom, 0px));
  }

  /* Pool scrolls horizontally rather than shrinking to toy size */
  .pool__list {
    display: grid; grid-auto-flow: column; grid-auto-columns: 74%;
    grid-template-columns: none;
    overflow-x: auto; scroll-snap-type: x proximity;
    padding-bottom: 6px; margin-inline: -18px; padding-inline: 18px;
    overscroll-behavior-x: contain;
  }
  .pool-item { scroll-snap-align: start; }

  .planner__head { display: none; }

  .week__row {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "no meta" "event event";
    row-gap: 7px; column-gap: 12px;
    padding-block: 14px;
  }
  /* "HAFTA 3  Bu hafta" on one baseline, the dates on their own line
     underneath. A wrapping row: the dates take a full line (flex-basis 100%),
     so their width can never push the numeral sideways — numerals line up
     from row to row. */
  .week__no {
    flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: flex-start;
    text-align: left; font-size: 17px;
  }
  .week__no-word { order: 1; margin-right: 7px; }
  .week__no-num { order: 2; }
  .week__now { order: 3; margin: 0 0 0 10px; font-size: 12.5px; }
  .week__dates { order: 4; flex-basis: 100%; margin-top: 1px; font-size: 13px; }

  /* Reading size (design pass): what people come to read — event titles,
     todos, notes, file names, dates — is set for a phone at arm's length.
     Short structural labels (GÖREVLER, HAFTA) stay small. */
  .week__counts { font-size: 13px; }
  .event__title { font-size: 18px; }
  .event__desc { font-size: 14px; }
  .pool-item__title { font-size: 16.5px; }
  .pool-item__desc { font-size: 14px; }
  .todo, .file, .note__text { font-size: 15px; }
  .file__size { font-size: 13px; }
  .detail__empty { font-size: 14px; }
  .event-action, .desc-toggle { font-size: 14px; }
  .note__save, .todo-add__error, .file-add__hint { font-size: 12.5px; }
  .week-choice__dates { font-size: 13.5px; }
  .week__meta { justify-content: flex-end; padding-top: 0; }
  .week__detail-inner { flex-direction: column; margin-left: 0; }
  .detail-col + .detail-col {
    border-left: 0; border-top: 1px solid var(--rule);
    margin-left: 0; padding-left: 0; margin-top: 16px; padding-top: 16px;
  }

  .edit-dock { right: 18px; left: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
  .edit-btn { width: 100%; justify-content: center; }
  /* Reading is what most visits are for: "Düzenle" is a compact, quiet button
     at the thumb's corner. Holding the lease, "Bitir" is the full-width bar. */
  body:not(.has-lease) .edit-dock { left: auto; }
  body:not(.has-lease) .edit-btn:not(.is-locked) {
    width: auto; background: var(--surface); color: var(--ink-700); border-color: var(--rule-strong);
  }
  body:not(.has-lease) .edit-btn:not(.is-locked):focus-visible { outline-color: var(--ink-700); outline-offset: 2px; }
  /* full-width dock: reserve its height so nothing hides underneath it */
  #main { padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }

  /* Dialogs with text fields are full-width sheets pinned to the TOP: the
     on-screen keyboard rises from the bottom and can never cover them. The
     placement is fixed per dialog on purpose — a sheet that moved when a field
     gained or lost focus jumped out from under the finger tapping "Ekle"
     (found by tapping it, Phase 8.5). */
  .dialog {
    width: 100%; max-width: none; max-height: 88dvh;
    margin: 0 0 auto; border-radius: 0 0 3px 3px; border-top: 0;
    padding-top: env(safe-area-inset-top, 0px);
  }
  /* The week picker has no text field: a bottom sheet, within thumb reach. */
  .dialog--sheet {
    margin: auto 0 0; border-radius: 3px 3px 0 0; border-top: 1px solid var(--rule-strong); border-bottom: 0;
    padding-top: 0; padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .choice-list { max-height: 46vh; }
  .week-choice-list { max-height: none; }

  /* The fixed "Bitir" bar would sit on top of whatever is being typed into
     while the keyboard is up; it steps aside until the field loses focus. */
  body:has(.week__detail-inner :is(input, textarea):focus) .edit-dock,
  body:has(.week__detail-inner :is(input, textarea):focus) .statusbar__msg { visibility: hidden; }

  /* iOS zooms the page into any field under 16 px on focus; 16 px everywhere
     a phone user types keeps the page still. */
  .field__input, .todo-add input, .note__area { font-size: 16px; }

  /* heading and "+ Etkinlik ekle" share the first line; the hint goes under */
  .section-head { align-items: center; }
  .section-head__title { flex: 1 1 auto; }
  .pool__add { order: 2; margin-left: 0; }
  .section-head__hint { order: 3; flex-basis: 100%; }
  .pool-item__desc { -webkit-line-clamp: 3; }
}

/* The narrowest phones: the picker's three columns ("28 Eylül–2 Ekim" next to
   "şu an burada") need every pixel — slightly tighter columns and padding. */
@media (max-width: 360px) {
  .dialog--picker .panel { padding-inline: 16px; }
  .week-choice { grid-template-columns: 4.2em auto minmax(0, 1fr); column-gap: 10px; padding-inline: 8px; }
}

/* ==========================================================================
   Touch (Phase 8.5) — hit areas of at least 44 px for every control a phone
   user needs, WITHOUT changing how anything looks: the extra height is padding
   around the same words and icons.
   ========================================================================== */
@media (pointer: coarse) {
  .event-action { min-height: 44px; padding-block: 12px; display: inline-flex; align-items: center; }
  .event-actions { gap: 0 20px; margin-top: 2px; }
  .week__expand { width: 44px; height: 44px; margin: -7px -7px -7px 0; }
  .week__add { min-height: 44px; padding-inline: 14px; }
  .pool__add { min-height: 44px; }
  .btn, .btn--small { min-height: 44px; }
  .tab { min-height: 44px; }
  .field__input { min-height: 44px; }
  .dialog__close { width: 44px; height: 44px; margin: -8px -10px 0 0; }
  /* Edit Mode only: a read-only todo is not a control, so it stays compact. */
  body.is-editing .todo { align-items: center; min-height: 44px; }
  .todo input[type="checkbox"] { width: 20px; height: 20px; margin: 0; }
  body.is-editing .todo__text { padding-block: 12px; flex: 1 1 auto; }
  .desc-toggle { min-height: 44px; display: inline-flex; align-items: center; padding-block: 12px; margin-top: -6px; }
  .note__retry { padding-block: 12px; }
  .statusbar__msg-close { width: 44px; height: 44px; margin: -12px -14px -12px 0; }
  .todo__remove, .file__remove {
    display: grid; place-items: center; width: 44px; height: 44px; margin: -6px -12px -6px 0; padding: 0;
  }
  .file { min-height: 44px; }
  .file__link { padding-block: 12px; }
  /* centred on the file name's FIRST line, however many lines the name takes */
  .file__remove { margin-top: 1px; margin-bottom: 0; }
  .week-choice { min-height: 48px; }
  .choice { min-height: 48px; }
}

/* Hover states belong to devices that hover. On a phone the last-tapped row
   would otherwise keep its hover tint until something else is tapped. */
@media (hover: none) {
  .week:hover > .week__row { background: none; }
  body.is-editing .pool-item:hover { transform: none; border-color: var(--rule); }
}

/* ==========================================================================
   Reduced motion — every transition becomes instantaneous. State still reads,
   because every state is also a border, a rule or a word, never motion alone.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  body.is-editing .pool-item:hover { transform: none; }
}

/* ==========================================================================
   Edit lease (Phase 3)
   ========================================================================== */

/* Quiet presence line: "X şu anda düzenliyor", or the hard-cap warning. */
.lease-banner {
  display: flex; align-items: baseline; gap: 9px;
  border: 1px solid var(--rule-strong);
  border-left: 2px solid var(--ink-700);
  border-radius: 2px;
  background: var(--surface);
  padding: 9px 13px;
  margin-top: 18px;
  font-size: 13px; color: var(--ink-700);
}
.lease-banner--warn { border-left-color: var(--danger); color: var(--danger); font-weight: 600; }

/* Losing the lease is not a toast. It is a panel that stays until acknowledged,
   because it may be carrying the user's only copy of unsaved text. */
.lease-lost {
  max-width: 620px;
  border: 1px solid var(--rule-strong);
  border-left: 2px solid var(--danger);
  border-radius: 2px;
  background: var(--surface);
  padding: 20px 22px 22px;
  margin-top: 20px;
}
.lease-lost__title { font: 400 17px/1.3 var(--serif); color: var(--ink-900); margin-bottom: 7px; }
.lease-lost__body  { font-size: 13.5px; color: var(--ink-700); }
.lease-lost__pending { margin-top: 16px; }
.lease-lost__pending-title {
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: 600; color: var(--slate-500); margin-bottom: 6px;
}
.lease-lost__pending-text {
  width: 100%; resize: vertical;
  border: 1px solid var(--rule); border-radius: 2px; background: var(--paper);
  padding: 8px 10px; font-size: 13px; line-height: 1.5; color: var(--ink-700);
}
.lease-lost__pending-note { font-size: 12px; color: var(--slate-600); margin-top: 7px; }
.lease-lost .btn { margin-top: 16px; }

.dialog--narrow { width: min(420px, calc(100vw - 32px)); }
.field__hint { font-size: 12px; color: var(--slate-500); margin-top: 6px; }

/* Countdown shown next to "Bitir" as the hard cap approaches */
.edit-btn__timer {
  font-variant-numeric: tabular-nums;
  font-weight: 400; opacity: 0.85; font-size: 12.5px;
}