@import url("https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400..600;1,6..72,400..600&display=swap");

/* ============================================================
   Token — copiati dal kit Prima (tokens/*.css)
   ============================================================ */
:root {
  /* base */
  --bg: #fafafa;
  --surface: #ffffff;
  --ink: #1a1a1a;
  --ink-strong: #1a1a1a;
  --ink-soft: rgba(26, 26, 26, .72);
  --ink-muted: rgba(26, 26, 26, .45);
  --ink-faint: rgba(26, 26, 26, .28);
  --hairline: rgba(26, 26, 26, .08);
  --hover-wash: rgba(26, 26, 26, .03);
  /* accento ambra */
  --accent: oklch(0.72 0.13 65);
  --accent-deep: oklch(0.55 0.13 65);
  --accent-wash: oklch(0.72 0.13 65 / .07);
  --accent-selection: oklch(0.72 0.13 65 / .25);
  /* semantici */
  --danger: oklch(0.55 0.12 25);
  --danger-wash: oklch(0.55 0.12 25 / .07);
  --on-accent: #ffffff;
  /* alias semantici */
  --text-body: var(--ink);
  --text-secondary: var(--ink-soft);
  --text-hint: var(--ink-muted);
  --text-placeholder: var(--ink-faint);
  --surface-page: var(--bg);
  --surface-card: var(--surface);
  --border-subtle: var(--hairline);

  /* tipografia */
  --font-serif: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, monospace;
  --text-display: 500 38px/1.15 var(--font-serif);
  --text-title: 500 24px/1.25 var(--font-serif);
  --text-task: 400 19px/1.5 var(--font-serif);
  --text-body-sm: 400 17px/1.5 var(--font-serif);
  --text-caption: 400 13px/1.4 var(--font-mono);
  --text-micro: 400 11px/1.2 var(--font-mono);
  --tracking-display: -0.01em;
  --tracking-label: 0.12em;

  /* spazi */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 36px; --sp-7: 48px; --sp-8: 72px; --sp-9: 96px;
  --gap-row: 14px;
  --measure: 620px;
  --hit-min: 44px;

  /* forma e movimento */
  --radius-row: 8px;
  --radius-pill: 999px;
  --radius-card: 12px;
  --shadow-card: 0 1px 3px rgba(0, 0, 0, .06);
  --shadow-pop: 0 8px 32px rgba(0, 0, 0, .10);
  --ease: cubic-bezier(.25, .1, .25, 1);
  --t-fast: .15s;
  --t-med: .25s;
  --t-slow: .3s;
}

@keyframes prima-task-in { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } }
@keyframes prima-fade-up { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }

/* ============================================================
   Base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box }
html, body { margin: 0; min-height: 100% }
body {
  background: var(--bg);
  font-family: var(--font-serif);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--accent-selection) }

input, textarea {
  font-family: var(--font-serif);
  border: none;
  background: transparent;
  outline: none;
  color: var(--ink);
}
input::placeholder, textarea::placeholder { color: var(--text-placeholder); font-style: italic }
button { font-family: var(--font-serif); cursor: pointer }
a { color: var(--accent-deep); text-decoration: none }
a:hover { color: var(--accent) }

[x-cloak] { display: none !important }

/* ============================================================
   Impalcatura di pagina
   ============================================================ */
.col { min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: 0 24px }
.inner { width: 100%; max-width: var(--measure) }
.page { padding: 96px 0 120px; animation: prima-fade-up .6s var(--ease) both }
.mono { font-family: var(--font-mono) }
.hair { height: 1px; background: var(--hairline) }

.label {
  font: var(--text-caption);
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
}

.back {
  font: var(--text-caption);
  font-family: var(--font-mono);
  color: var(--ink-muted);
}
.back:hover { color: var(--ink-soft) }

.display {
  font: var(--text-display);
  font-weight: 500;
  letter-spacing: var(--tracking-display);
  margin: 0;
}
.subtitle { font: var(--text-body-sm); font-style: italic; color: var(--ink-muted); margin-top: 10px }
.hint { font: var(--text-body-sm); font-style: italic; color: var(--ink-faint) }

.pill {
  font: var(--text-micro);
  font-family: var(--font-mono);
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  color: var(--ink-muted);
  background: var(--hover-wash);
}
.pill--accent { color: var(--accent-deep); background: var(--accent-wash) }

.btn {
  border: none;
  border-radius: var(--radius-pill);
  padding: 9px 20px;
  font-size: 17px;
  background: var(--accent);
  color: var(--on-accent);
  transition: background var(--t-fast) var(--ease);
}
.btn:hover { background: var(--accent-deep) }
.btn:disabled { opacity: .45; cursor: default }
.btn--sm { font-size: 15px; padding: 7px 16px }

.link-btn {
  border: none;
  background: transparent;
  font-size: 15px;
  font-style: italic;
  color: var(--accent-deep);
  padding: 0;
}
.link-btn:hover { color: var(--accent) }
.link-btn--danger { color: var(--danger) }

.field {
  font-size: 17px;
  padding: 8px 0;
  border-bottom: 1px solid var(--hairline);
  width: 100%;
}

.kbd {
  font: var(--text-caption);
  font-family: var(--font-mono);
  color: var(--ink-faint);
}

.avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  background: var(--surface);
  display: flex; align-items: center; justify-content: center;
  font: var(--text-micro);
  font-family: var(--font-mono);
  color: var(--ink-soft);
  flex: none;
}

/* ============================================================
   La lista
   ============================================================ */
.nav {
  display: flex; gap: 20px; flex-wrap: wrap;
  font: var(--text-caption);
  font-family: var(--font-mono);
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  margin-bottom: 44px;
}
.nav a { color: var(--ink-muted); padding-bottom: 5px; border-bottom: 1.5px solid transparent }
.nav a:hover { color: var(--ink-soft) }
.nav a.is-active { color: var(--ink); border-bottom-color: var(--accent) }

/* Il + che apre una nuova organizzazione, in fondo alla riga */
.nav__add { margin-left: auto; display: flex; align-items: center }
.nav__plus {
  border: none; background: transparent; padding: 0 2px 5px;
  font-family: var(--font-mono); font-size: 16px; line-height: 1;
  color: var(--ink-faint);
  transition: color var(--t-fast) var(--ease);
}
.nav__plus:hover { color: var(--accent) }
.nav__name {
  font-family: var(--font-mono); font-size: 13px;
  text-transform: none; letter-spacing: 0;
  width: 170px; max-width: 40vw;
  padding-bottom: 4px;
  border-bottom: 1.5px solid var(--accent);
}

.row {
  display: flex;
  align-items: center;
  gap: var(--gap-row);
  padding: 4px 8px 4px 28px;
  margin-left: -28px;
  position: relative;
  border-radius: var(--radius-row);
  transition: background var(--t-fast) var(--ease);
  animation: prima-task-in var(--t-med) var(--ease) both;
}
.row:hover { background: var(--hover-wash) }

/* Trascinamento: la riga si stacca e le altre le fanno posto scivolando. */
.row.is-dragging {
  background: var(--surface);
  box-shadow: var(--shadow-pop);
  position: relative;
  z-index: 3;
  cursor: grabbing;
}
body.is-dragging-task { user-select: none; -webkit-user-select: none }
body.is-dragging-task .row:not(.is-dragging) { transition: transform var(--t-fast) var(--ease) }

.row__grip {
  position: absolute; left: 4px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  cursor: grab;
  color: transparent;
  font-size: 13px; letter-spacing: 1px;
  transition: color var(--t-fast);
  /* Senza questo, sul telefono il dito scorre la pagina invece di trascinare. */
  touch-action: none;
}
.row:hover .row__grip { color: var(--ink-faint) }
.row__grip:active { cursor: grabbing }

/* Sul touch non c'è hover: la maniglia si vede sempre, e il target è più largo. */
@media (hover: none) {
  .row__grip { color: var(--ink-faint); width: 28px }
  .row { padding-left: 34px }
  .row__open, .row__org { opacity: 1; color: var(--ink-faint) }
}

.row__number {
  font-family: var(--font-mono);
  font-size: 11px;
  width: 18px;
  text-align: right;
  flex: none;
  color: var(--ink-faint);
  transition: color var(--t-slow);
}
.row--first .row__number { color: var(--accent) }

.circle {
  flex: none;
  width: 19px; height: 19px;
  border-radius: 50%;
  border: 1.5px solid var(--ink-faint);
  background: transparent;
  padding: 0;
  display: flex; align-items: center; justify-content: center;
  transition: border-color var(--t-med) var(--ease), background var(--t-med) var(--ease);
}
.circle:hover { border-color: var(--accent) }
.circle span { color: var(--on-accent); font-size: 11px; line-height: 1; opacity: 0; transition: opacity var(--t-fast) }
.circle.is-checked { border-color: var(--accent); background: var(--accent) }
.circle.is-checked span { opacity: 1 }

.row__input {
  font: var(--text-task);
  font-family: var(--font-serif);
  padding: 7px 0;
  flex: 1 1 auto;
  min-width: 50%;
  color: var(--ink-soft);
  transition: color var(--t-slow);
}
.row--first .row__input { color: var(--ink) }

.row__open {
  flex: none;
  border: none; background: transparent; padding: 2px 4px;
  font: var(--text-caption); font-family: var(--font-mono);
  color: transparent;
  transition: color var(--t-fast);
}
.row:hover .row__open { color: var(--ink-faint) }
.row__open:hover { color: var(--accent-deep) }

.row__org {
  flex: none;
  opacity: 0;
  transition: opacity var(--t-fast);
}
.row:hover .row__org { opacity: 1 }

.add-row {
  display: flex; align-items: center; gap: var(--gap-row);
  border: none; background: transparent;
  cursor: text;
  padding: 10px 8px 10px 32px;
  width: 100%;
  text-align: left;
  font-family: var(--font-serif);
  font-size: 17px;
  font-style: italic;
  color: var(--ink-faint);
}
.add-row span { font-size: 18px; font-style: normal; color: var(--accent) }
.add-row:hover { color: var(--ink-muted) }

.done-list { margin-top: 44px; animation: prima-fade-up .4s var(--ease) both }
.done-row {
  display: flex; align-items: center; gap: var(--gap-row);
  padding: 5px 8px;
  opacity: .45;
  transition: opacity var(--t-fast);
}
.done-row:hover { opacity: .7 }
.done-row__title {
  font: var(--text-task);
  text-decoration: line-through;
  color: var(--ink-soft);
}

.shortcuts { margin-top: 72px; display: flex; gap: 18px; flex-wrap: wrap }

/* ============================================================
   Più avanti — il magazzino, sotto la linea
   ============================================================ */
.later { margin-top: 40px; animation: prima-fade-up .4s var(--ease) both }
.later__head {
  display: flex; align-items: baseline; gap: 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 8px;
}
.row--later .row__input { color: var(--ink-muted) }
.row--later:hover .row__input { color: var(--ink-soft) }
.row--later .row__number { visibility: hidden }

/* ============================================================
   Quello che la sintassi ha tirato fuori dal titolo
   ============================================================ */
/* Il titolo viene prima: le pill cedono spazio e semmai si tagliano. */
.row__meta {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 6px; flex-wrap: nowrap;
  flex: 0 1 auto;
  min-width: 0; max-width: 45%;
  overflow: hidden;
}
.row__meta .pill { flex: none }
.pill--project { color: var(--accent-deep); background: var(--accent-wash) }
.pill--tag { color: var(--ink-muted); background: var(--hover-wash) }
.pill--overdue { color: var(--danger); background: var(--danger-wash) }
.pill--urgente { color: var(--danger); background: var(--danger-wash) }
.pill--alta { color: var(--accent-deep); background: var(--accent-wash) }
.pill--media, .pill--bassa { color: var(--ink-muted); background: var(--hover-wash) }

/* ============================================================
   Organizzazioni
   ============================================================ */
.nav a.is-drop {
  color: var(--on-accent);
  background: var(--accent);
  border-radius: var(--radius-pill);
  padding: 2px 10px 4px;
  border-bottom-color: transparent;
}
.nav__settings { font-style: normal; opacity: .6 }

.org-row {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 8px;
  border-bottom: 1px solid var(--hairline);
}
.org-row__logo {
  width: 40px; height: 40px; flex: none;
  border-radius: var(--radius-row);
  object-fit: contain;
  background: var(--surface);
  border: 1px solid var(--hairline);
}
.org-row__logo--empty {
  display: flex; align-items: center; justify-content: center;
  font: var(--text-micro); font-family: var(--font-mono);
  color: var(--ink-muted);
}
.org-row__body { flex: 1; min-width: 0 }
.org-row__name { font-size: 19px; color: var(--ink) }
.org-row__name:hover { color: var(--accent-deep) }
.org-row__gear {
  flex: none; border: none; background: transparent;
  font-size: 18px; color: var(--ink-faint); padding: 6px;
  transition: color var(--t-fast);
}
.org-row__gear:hover { color: var(--ink-soft) }

/* Il logo di chi ti ospita, in alto a sinistra */
.brand-logo {
  position: absolute; top: 24px; left: 0;
  height: 34px; max-width: 160px;
  object-fit: contain;
}

/* ============================================================
   Modale
   ============================================================ */
.modal { max-width: 520px; overflow: visible }
.modal__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px }
.modal__body { padding: 20px 24px; display: flex; flex-direction: column; gap: 28px; max-height: 60vh; overflow-y: auto }
.modal__foot { display: flex; align-items: center; gap: 14px; padding: 18px 24px }
.field-block .label { margin-bottom: 4px }
.hidden-form { display: none }

/* ============================================================
   Menu profilo
   ============================================================ */
.avatar-button { position: absolute; top: 28px; right: 0 }
.menu {
  position: absolute; top: 70px; right: 0;
  width: 268px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-pop);
  padding: 18px 20px;
  z-index: 20;
  animation: prima-task-in var(--t-med) var(--ease) both;
}
/* ============================================================
   Ricerca ⌘K
   ============================================================ */
.overlay {
  position: fixed; inset: 0;
  display: flex; justify-content: center;
  padding: 140px 24px 24px;
  background: rgba(250, 250, 250, .4);
  backdrop-filter: blur(1px);
  z-index: 50;
}
.palette {
  width: 100%; max-width: 520px; height: fit-content;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
  animation: prima-task-in var(--t-med) var(--ease) both;
}
.palette__result {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 12px;
  border-radius: var(--radius-row);
  cursor: pointer;
}
.palette__result.is-active { background: var(--accent-wash) }
.palette__result.is-done { opacity: .6 }
.palette__result.is-done .palette__title { text-decoration: line-through }
.palette__title { font-size: 19px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.palette__title strong { font-weight: 500 }

/* ============================================================
   Integrazioni
   ============================================================ */
.key-chip {
  font: var(--text-caption);
  font-family: var(--font-mono);
  color: var(--ink-soft);
  background: var(--hover-wash);
  padding: 8px 14px;
  border-radius: var(--radius-row);
  word-break: break-all;
}

.hook {
  display: flex; align-items: center; gap: 14px;
  padding: 8px 0;
}
.hook__event {
  flex: none; width: 120px; text-align: center;
}
.hook__url {
  font: var(--text-caption);
  font-family: var(--font-mono);
  color: var(--ink-soft);
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  border-bottom: 1px solid transparent;
  padding: 4px 0;
}
.hook__url:focus { border-bottom-color: var(--hairline) }
.hook__url::placeholder { color: var(--ink-faint) }

.switch {
  width: 34px; height: 20px;
  border-radius: 999px;
  position: relative;
  flex: none;
  border: none;
  padding: 0;
  background: var(--ink-faint);
  transition: background var(--t-med) var(--ease);
}
.switch::after {
  content: '';
  position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--shadow-card);
  transition: left var(--t-med) var(--ease);
}
.switch[aria-checked="true"] { background: var(--accent) }
.switch[aria-checked="true"]::after { left: 16px }
.switch:disabled { opacity: .5; cursor: default }

.call {
  display: flex; gap: 18px;
  padding: 6px 0;
  font: var(--text-caption);
  font-family: var(--font-mono);
  color: var(--ink-muted);
}
.call__time { width: 52px; flex: none }
.call__event { width: 120px; flex: none }
.call__summary { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.call__status { flex: none; color: var(--accent-deep) }
.call__status.is-error { color: var(--danger) }

/* ============================================================
   Messaggi
   ============================================================ */
.notice {
  font: var(--text-body-sm);
  font-style: italic;
  color: var(--accent-deep);
  margin-top: 12px;
}
.notice--error { color: var(--danger) }

/* ============================================================
   Schermi stretti — la misura resta la stessa, cambia il respiro
   ============================================================ */
@media (max-width: 640px) {
  .page { padding: 56px 0 96px }
  :root { --text-display: 500 30px/1.2 var(--font-serif) }
  .row { padding-left: 8px; margin-left: 0 }
  .row__grip { display: none }
  .hook { flex-wrap: wrap }
  .hook__event { width: auto }
  .hook__url { flex-basis: 100%; order: 3 }
  .call__summary { flex-basis: 100%; order: 4 }
  .overlay { padding-top: 80px }
}