/* the tideline · three-phase room. the palette walks from clay heat
   (set it down) through dusk brass (the turn) to fern (the keep).
   custom properties do not interpolate on their own, so every surface
   below transitions a concrete property that references them. */

.tid-room{
  --tid-bg:#150E0B;
  --tid-ink:#F2EADC;
  --tid-mut:rgba(242,234,220,.66);
  --tid-acc:#C0552F;          /* borders, marks */
  --tid-accT:#DA7C55;         /* text-safe accent, 4.5:1 on the bg */
  --tid-hair:rgba(192,85,47,.30);
  --tid-card:rgba(255,255,255,.04);
  --tid-water:#3A2A22;
  --tid-water2:#2A1E18;
  --tid-shift:1.6s;
}
.tid-room[data-tid="turn"]{
  --tid-bg:#14150F;
  --tid-ink:#EDE7D6;
  --tid-mut:rgba(237,231,214,.64);
  --tid-acc:#A6955F;
  --tid-accT:#C7B67F;
  --tid-hair:rgba(179,162,107,.28);
  --tid-water:#2E3126;
  --tid-water2:#22251C;
}
.tid-room[data-tid="keep"]{
  --tid-bg:#0F150E;
  --tid-ink:#EDE7D6;
  --tid-mut:rgba(237,231,214,.68);
  --tid-acc:#7E9169;
  --tid-accT:#9DB287;
  --tid-hair:rgba(126,145,105,.32);
  --tid-water:#243527;
  --tid-water2:#1A281D;
}

/* out-specificity the v2 overlay skin's gradient background: gradients
   snap between states, a solid background-color actually transitions. */
#device[data-ui="sanctuary-v2"] > #ovl .ovl.tid-room,
.ovl.tid-room{
  background:var(--tid-bg);
  color:var(--tid-ink);
  transition:background-color var(--tid-shift) ease,color var(--tid-shift) ease;
}
.tid-room::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(90% 46% at 50% 0%,rgba(255,255,255,.05),transparent 72%);
}
/* the room is full-bleed: an hour like this does not need a tab bar */
#device:has(.tid-room) #ovl{bottom:0;z-index:60;}

.tid-pad{position:relative;max-width:560px;width:100%;margin:0 auto;}
.tid-inner{position:relative;z-index:2;display:flex;flex-direction:column;flex:1;}

/* ---- the shore ---- */
.tid-tide{
  position:absolute;left:0;right:0;bottom:0;height:120px;width:100%;
  z-index:1;pointer-events:none;opacity:.9;
}
.tid-sand{fill:rgba(237,231,214,.05);}
.tid-w1{fill:var(--tid-water);transition:fill var(--tid-shift) ease;}
.tid-w2{fill:var(--tid-water2);transition:fill var(--tid-shift) ease;opacity:.8;}
.tid-water{transition:transform var(--tid-shift) ease;}
.tid-mark{fill:rgba(237,231,214,.34);transition:transform var(--tid-shift) ease,opacity var(--tid-shift) ease;}
/* set it down: the water is close, ready to take it. the turn and after:
   it has drawn back out and the mark went with it. the keep: returning. */
.tid-room[data-tid="down"] .tid-water{transform:translateY(6px);}
.tid-room[data-tid="turn"] .tid-water{transform:translateY(30px);}
.tid-room[data-tid="turn"] .tid-mark,
.tid-room[data-tid="keep"] .tid-mark{transform:translateX(60px) translateY(-14px);opacity:0;}
.tid-room[data-tid="keep"] .tid-water{transform:translateY(16px);}

/* ---- the thread of steps ---- */
.tid-steps{
  display:flex;gap:14px;list-style:none;padding:0;margin:0 0 26px;
  font-size:10.5px;letter-spacing:1.6px;text-transform:lowercase;
}
.tid-steps li{
  color:var(--tid-mut);opacity:.42;padding-top:8px;position:relative;
  transition:color var(--tid-shift) ease,opacity var(--tid-shift) ease;
}
.tid-steps li::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:var(--tid-hair);transition:background-color var(--tid-shift) ease;
}
.tid-steps li.on{opacity:1;color:var(--tid-accT);}
.tid-steps li.on::before{background:var(--tid-acc);}
.tid-steps li.was{opacity:.72;}

/* ---- type ---- */
.tid-room .eyebrow{color:var(--tid-accT);transition:color var(--tid-shift) ease;}
.tid-room .scrn-title{
  color:var(--tid-ink);margin:10px 0 8px;outline:none;
  transition:color var(--tid-shift) ease;
}
.tid-room .lead{color:var(--tid-mut);max-width:44ch;transition:color var(--tid-shift) ease;}

/* ---- inputs ---- */
.tid-chiprow{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 2px;}
/* 44px minimum on every touch target. the visible pill stays small; the
   hit area is grown with padding, not with a bigger-looking control. */
.tid-chip{
  border:1px solid var(--tid-hair);background:transparent;color:var(--tid-mut);
  border-radius:999px;padding:12px 14px;min-height:44px;font:inherit;font-size:12.5px;
  cursor:pointer;display:inline-flex;align-items:center;
  transition:border-color .5s ease,color .5s ease,background-color .5s ease;
}
.tid-chip.on{border-color:var(--tid-acc);color:var(--tid-accT);background:var(--tid-card);}
.tid-vent{
  /* the box scales with the screen instead of a fixed 8 rows: on a 568px
     phone a fixed box ate 42% of the viewport and pushed the seal button
     two scrolls down. still growable by hand. */
  width:100%;margin-top:14px;height:clamp(132px,30vh,250px);resize:vertical;
  border:1px solid var(--tid-hair);border-radius:14px;background:var(--tid-card);
  color:var(--tid-ink);caret-color:var(--tid-accT);
  padding:14px 16px;font:inherit;font-size:15.5px;font-weight:300;line-height:1.65;
  transition:border-color var(--tid-shift) ease,background-color var(--tid-shift) ease,color var(--tid-shift) ease;
}
.tid-vent:focus{outline:none;border-color:var(--tid-acc);}
.tid-vent::placeholder{color:var(--tid-mut);opacity:.5;}

.tid-q{margin-top:20px;}
.tid-q label{display:block;font-size:15px;line-height:1.5;color:var(--tid-ink);transition:color var(--tid-shift) ease;}
.tid-q textarea{
  width:100%;margin-top:9px;resize:vertical;
  border:0;border-bottom:1px solid var(--tid-hair);border-radius:0;background:transparent;
  color:var(--tid-ink);caret-color:var(--tid-accT);
  padding:6px 2px 9px;font:inherit;font-size:15px;font-weight:300;line-height:1.6;
  transition:border-color var(--tid-shift) ease,color var(--tid-shift) ease;
}
.tid-q textarea:focus{outline:none;border-bottom-color:var(--tid-acc);}

/* ---- the held strip while sealed ---- */
.tid-held{
  display:flex;flex-direction:column;gap:6px;align-items:flex-start;
  margin:18px 0 4px;padding:12px 14px;border:1px solid var(--tid-hair);
  border-radius:12px;background:var(--tid-card);font-size:12.5px;color:var(--tid-mut);
  transition:border-color var(--tid-shift) ease,background-color var(--tid-shift) ease;
}

/* ---- the keep ---- */
.tid-keeps{display:flex;flex-direction:column;gap:10px;margin-top:18px;}
.tid-keep-row{
  display:flex;gap:12px;align-items:flex-start;cursor:pointer;
  border:1px solid var(--tid-hair);border-radius:13px;padding:13px 15px;
  background:var(--tid-card);
  transition:border-color .5s ease,background-color .5s ease;
}
.tid-keep-row:has(input:checked){border-color:var(--tid-acc);}
.tid-keep-row input{margin-top:3px;accent-color:var(--tid-acc);}
.tid-keep-row small{display:block;font-size:11px;letter-spacing:.4px;color:var(--tid-mut);margin-bottom:4px;}
.tid-keep-row span span{font-size:14.5px;line-height:1.55;color:var(--tid-ink);}

.tid-keptbox{
  margin-top:18px;padding:14px 16px;border:1px solid var(--tid-hair);
  border-radius:13px;background:var(--tid-card);
}
.tid-keptbox p{font-size:14.5px;line-height:1.55;color:var(--tid-ink);margin:7px 0 0;}
.tid-keptbox small{display:block;margin-top:10px;font-size:11.5px;color:var(--tid-mut);}

.tid-dove{margin-top:14px;padding:2px 2px 0;}
.tid-dove span{font-size:10.5px;letter-spacing:1.4px;color:var(--tid-accT);}
.tid-dove p{font-size:14.5px;line-height:1.6;color:var(--tid-mut);margin:6px 0 0;font-style:italic;}

/* ---- reading it back, a day later ---- */
.tid-body{
  margin:16px 0 14px;padding:16px 18px;border-left:2px solid var(--tid-acc);
  background:var(--tid-card);border-radius:0 13px 13px 0;
  font-size:15px;line-height:1.7;color:var(--tid-ink);font-weight:300;
  max-height:44vh;overflow-y:auto;
  transition:border-color var(--tid-shift) ease;
}

/* ---- footer actions ---- */
.tid-foot{margin-top:auto;padding-top:26px;display:flex;flex-direction:column;gap:13px;align-items:flex-start;}
.tid-btn{
  border:1px solid var(--tid-acc);background:transparent;color:var(--tid-accT);
  border-radius:999px;padding:12px 22px;font:inherit;font-size:14px;cursor:pointer;
  transition:border-color var(--tid-shift) ease,color var(--tid-shift) ease,background-color .45s ease;
}
.tid-btn:hover{background:var(--tid-card);}
.tid-btn[disabled]{opacity:.38;cursor:not-allowed;}
.tid-link{
  border:0;background:transparent;color:var(--tid-mut);cursor:pointer;
  font:inherit;font-size:12.5px;text-decoration:underline;text-underline-offset:4px;
  padding:11px 0;min-height:44px;display:inline-flex;align-items:center;
  transition:color .45s ease;
}
.tid-link:hover{color:var(--tid-ink);}
.tid-release.armed{color:var(--tid-accT);}
.tid-truth{font-size:11.5px;line-height:1.6;color:var(--tid-mut);max-width:46ch;margin:0;}

/* ---- the cairn's companion card ---- */
.tideline-card{
  display:flex;flex-direction:column;align-items:flex-start;gap:5px;
  width:100%;text-align:left;cursor:pointer;margin-top:13px;
  border:1px solid var(--hair,rgba(237,231,214,.14));font:inherit;
}
.tideline-card strong{font-size:15px;font-weight:500;color:var(--ink);}
.tideline-card em{font-style:normal;font-size:12.5px;line-height:1.55;color:var(--soft,var(--ink));opacity:.8;}
.tideline-card.is-ripe{border-color:rgba(126,145,105,.55);}

/* reduced motion keeps every arrival, shortened. never animation:none. */
@media (prefers-reduced-motion: reduce){
  .tid-room{--tid-shift:.2s;}
}

/* ---- the vestibule breath · two sips in, one long pour out ---- */
.tid-breath {
  display: grid;
  place-items: center;
  height: 128px;
  margin: 6px 0 2px;
}

.tid-breath i {
  display: block;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, rgba(240, 214, 198, .5), rgba(192, 85, 47, .34) 62%, rgba(192, 85, 47, .12) 100%);
  box-shadow: 0 0 0 1px rgba(240, 214, 198, .14), 0 0 34px rgba(192, 85, 47, .18);
  transform: scale(.85);
  transition: transform 1.4s cubic-bezier(.37, 0, .3, 1);
}

.tid-breath.is-in i   { transform: scale(1.22); transition-duration: 3.2s; }
.tid-breath.is-top i  { transform: scale(1.34); transition-duration: 1.6s; }
.tid-breath.is-out i  { transform: scale(.72);  transition-duration: 8.2s; transition-timing-function: cubic-bezier(.22, .1, .36, 1); }
.tid-breath.is-rest i { transform: scale(.78);  transition-duration: 1.4s; }

.tid-breath-cue {
  margin: 0 0 4px;
  min-height: 1.4em;
  color: var(--tid-soft, rgba(237, 231, 214, .72));
  font-size: 13px;
  text-align: center;
  letter-spacing: .04em;
}

/* contact before language. these are working controls: the changing surface
   mirrors pressure while the actual sensation stays in the person's room. */
.tid-land-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin:22px 0 4px;}
.tid-land-grid button{min-height:92px;padding:14px 12px;text-align:left;border:1px solid var(--tid-line);border-radius:14px;background:rgba(242,234,220,.025);color:var(--tid-ink);font:inherit;cursor:pointer;}
.tid-land-grid strong{display:block;font-size:13px;font-weight:560;line-height:1.3;}
.tid-land-grid span{display:block;margin-top:7px;color:var(--tid-mut);font-size:11px;line-height:1.45;}
.tid-contact-pad{display:grid;place-items:center;width:min(360px,88vw);min-height:190px;margin:28px auto 0;padding:28px;border:1px solid rgba(204,117,78,.5);border-radius:32px;background:radial-gradient(circle at 50% 40%,rgba(204,117,78,.18),rgba(21,14,11,.08) 68%);color:var(--tid-ink);font:inherit;cursor:pointer;touch-action:none;-webkit-tap-highlight-color:transparent;transition:transform .24s ease,background .35s ease,border-color .35s ease;}
.tid-contact-pad.is-pressing{transform:scale(.965);background:radial-gradient(circle at 50% 40%,rgba(204,117,78,.34),rgba(21,14,11,.12) 72%);border-color:rgba(232,171,134,.82);}
.tid-contact-pad strong{display:block;font-family:var(--serif);font-size:18px;font-weight:400;}
.tid-contact-pad span{display:block;margin-top:8px;color:var(--tid-mut);font-size:12px;}
.tid-contact-cue{text-align:center;color:var(--tid-mut);font-size:11px;letter-spacing:.06em;margin:12px 0 0;min-height:1.4em;}
@media(max-width:620px){.tid-land-grid{grid-template-columns:1fr}.tid-land-grid button{min-height:68px}.tid-contact-pad{min-height:160px}}

@media (prefers-reduced-motion: reduce) {
  /* the words carry the pacing; the orb holds still at its resting size */
  .tid-breath i { transition: none; transform: scale(.85) !important; }
  .tid-contact-pad{transition:none;}
}