/* os.css — the house style of Timoho OS.
 *
 * One night, one lamp. Every screen in this shell — the gate, the plataran,
 * and every pos that opens from it — draws from the tokens below and from the
 * primitives under them. A pos brings its own layout; it never brings its own
 * palette, and it never redefines a token. Change a colour here and the whole
 * village changes with it.
 *
 * Straight from design/mockup.html, which is the ratified source of the look.
 */

:root{
  --night:#0e1420;
  --night-2:#141c2b;
  --night-3:#1a2436;
  --hill-back:#131b2a;
  --hill-front:#0f1622;
  --line:rgba(237,230,214,.10);
  --line-strong:rgba(237,230,214,.2);
  --bone:#ede6d6;
  --muted:#8b94a8;
  --lamp:#e8a84c;
  --lamp-soft:#f2c87e;
  --alarm:#e06c5a;
  --wood:#8a6a44;
  --wood-deep:#5c4630;
  --display:"Eczar",Georgia,serif;
  --ui:"Schibsted Grotesk","Segoe UI",system-ui,sans-serif;
  --mono:"JetBrains Mono","SFMono-Regular",Consolas,monospace;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--night);
  color:var(--bone);
  font-family:var(--ui);
  font-size:16px;
  line-height:1.5;
  min-height:100vh;
  overflow:hidden;
}
code{font-family:var(--mono);font-size:.85em;color:var(--lamp-soft)}
::selection{background:var(--lamp);color:var(--night)}
:focus-visible{outline:2px solid var(--lamp);outline-offset:2px;border-radius:4px}

/* The night itself — os.js paints stars and fireflies onto this. */
#sky{position:fixed;inset:0;z-index:0;pointer-events:none}

/* ---------- status bar ---------- */
/* Every screen carries it: where you are on the left, the way out and the
   hour on the right. A pos adds `.back` on the left; the plataran does not. */
.statusbar{
  position:fixed;top:0;left:0;right:0;z-index:6;
  display:flex;justify-content:space-between;align-items:center;
  padding:.6rem 1.1rem;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;
  color:var(--muted);
  background:linear-gradient(to bottom,rgba(14,20,32,.9),rgba(14,20,32,0));
}
.statusbar .dot{color:var(--lamp)}
.statusbar .left,.statusbar .right{display:flex;align-items:center;gap:1rem}
.statusbar a,.statusbar button{
  background:none;border:none;cursor:pointer;padding:0;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;
  color:var(--muted);text-decoration:none;
}
.statusbar a:hover,.statusbar button:hover{color:var(--bone)}

/* ---------- the gate's furniture ---------- */
.eyebrow{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.28em;
  color:var(--muted);text-transform:uppercase;margin:0 0 .9rem;
}
.wordmark{
  font-family:var(--display);font-weight:700;
  font-size:clamp(2.6rem,8vw,3.4rem);line-height:1.05;
  margin:0;letter-spacing:.01em;text-wrap:balance;
}
.wordmark .os{color:var(--lamp)}
.tagline{color:var(--muted);margin:.5rem 0 0;font-size:.95rem}
.divider{display:flex;align-items:center;gap:.7rem;margin:1.8rem 0;color:var(--line-strong)}
.divider::before,.divider::after{content:"";height:1px;flex:1;background:var(--line)}
.divider .gem{width:7px;height:7px;background:var(--lamp);transform:rotate(45deg);border-radius:1px;flex:none}

/* ---------- forms ---------- */
.field label{
  display:block;font-family:var(--mono);font-size:.68rem;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);margin-bottom:.35rem;
}
.field input,.field textarea{
  width:100%;padding:.7rem .85rem;font:inherit;color:var(--bone);
  background:var(--night-2);border:1px solid var(--line);border-radius:8px;
}
.field input:focus,.field textarea:focus{border-color:var(--lamp);outline:none}
.btn{
  padding:.75rem 1rem;
  font-family:var(--display);font-weight:600;font-size:1.05rem;
  letter-spacing:.04em;color:var(--night);
  background:var(--lamp);border:none;border-radius:8px;cursor:pointer;
  transition:background .2s ease,transform .15s ease;
}
.btn:hover{background:var(--lamp-soft)}
.btn:active{transform:scale(.98)}
.btn[disabled]{opacity:.55;cursor:default;transform:none}

/* What the server said, verbatim. Empty until there is something to say. */
.formerr{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.03em;
  color:var(--alarm);margin:.2rem 0 0;min-height:1.1rem;
}

/* ---------- the glance: Javanese calendar, pure typography ---------- */
.glance{
  position:absolute;top:3.6rem;left:2.6rem;z-index:2;
  text-align:left;pointer-events:none;
}
.glance .day{
  font-family:var(--ui);font-weight:300;
  font-size:1.9rem;line-height:1.15;margin:0;
  text-shadow:0 1px 4px rgba(14,20,32,.9);
}
.glance .day b{font-weight:500}
.glance .sub{
  font-family:var(--ui);font-size:.95rem;color:var(--muted);margin:.15rem 0 0;
}
.glance .sub .wayah{color:var(--lamp-soft);opacity:.9}

/* ---------- the village behind everything ---------- */
.scene{
  position:absolute;left:0;right:0;bottom:0;z-index:1;
  width:100%;height:38vh;pointer-events:none;
}

/* ---------- app icons ---------- */
.desk{
  height:100vh;padding:9.5rem 2.6rem 1rem;
  display:flex;flex-wrap:wrap;align-content:flex-start;
  gap:2.2rem 2.6rem;position:relative;z-index:2;
}
.app{
  display:flex;flex-direction:column;align-items:center;gap:.6rem;
  background:none;border:none;padding:0;cursor:pointer;
  color:var(--bone);font:inherit;text-decoration:none;
}
.app .icon{
  width:92px;height:92px;border-radius:24%;
  display:grid;place-items:center;position:relative;
  background:linear-gradient(165deg,var(--night-3),var(--night-2));
  border:1px solid var(--line-strong);
  box-shadow:0 6px 18px -8px rgba(0,0,0,.6);
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.app:hover .icon,.app:focus-visible .icon{
  transform:translateY(-4px) scale(1.03);
  border-color:rgba(232,168,76,.55);
  box-shadow:0 14px 34px -12px rgba(232,168,76,.35);
}
.app .art{display:block;width:58px;height:53px}
.app .glow{opacity:.5;transition:opacity .3s ease}
.app:hover .glow,.app:focus-visible .glow{opacity:1}
/* The lamp that says: you have not written yet today. Hidden until the board
   says otherwise — the markup never ships it lit. */
.app .badge{
  position:absolute;top:-5px;right:-5px;width:11px;height:11px;border-radius:50%;
  background:var(--lamp);box-shadow:0 0 8px var(--lamp);border:2px solid var(--night);
}
.app .badge[hidden]{display:none}
.app .name{
  font-family:var(--ui);font-weight:400;font-size:.88rem;letter-spacing:.01em;
  text-shadow:0 1px 3px rgba(14,20,32,.9);
}

/* the "+" slot — a promise of more pos */
.app.more .icon{
  background:none;
  border:1px dashed var(--line-strong);
  box-shadow:none;
}
.app.more:hover .icon,.app.more:focus-visible .icon{
  transform:none;
  border-color:rgba(232,168,76,.4);
  box-shadow:none;
}
.app.more .plus{
  font-family:var(--ui);font-weight:300;font-size:2rem;
  color:var(--muted);opacity:.6;line-height:1;
  transition:color .2s ease,opacity .2s ease;
}
.app.more:hover .plus{color:var(--lamp);opacity:.9}
.app.more .name{color:var(--muted);opacity:.55}

/* ---------- a pos still being built ---------- */
.pos{
  position:relative;z-index:2;height:100vh;
  display:grid;place-items:center;padding:5rem 1.25rem 2rem;text-align:center;
}
.pos .plate{max-width:26rem}
.pos h1{
  font-family:var(--display);font-weight:600;font-size:clamp(2rem,6vw,2.6rem);
  margin:0 0 .4rem;letter-spacing:.01em;
}
.pos p{color:var(--muted);margin:0}

/* ---------- toast ---------- */
.toast{
  position:fixed;left:50%;bottom:3rem;z-index:8;
  transform:translateX(-50%) translateY(12px);
  background:var(--night-3);border:1px solid var(--line-strong);
  border-left:3px solid var(--lamp);
  padding:.6rem 1rem;border-radius:8px;
  font-family:var(--mono);font-size:.75rem;letter-spacing:.04em;
  opacity:0;pointer-events:none;
  transition:opacity .3s ease,transform .3s ease;
  max-width:90vw;
}
.toast.show{opacity:1;transform:translateX(-50%)}

@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms!important;animation:none!important}
}
@media (max-width:600px){
  .glance{left:1.4rem}
  .glance .day{font-size:1.5rem}
  .desk{padding:8.5rem 1.4rem 1rem;gap:1.6rem 1.4rem}
  .app .icon{width:74px;height:74px}
  .app .art{width:46px;height:42px}
}

/* ---------- the device ----------
 * The shell renders inside a tablet; the page is the room around it. A tablet,
 * nothing else: bezel, camera dot, screen. On small viewports the bezel
 * dissolves — you are holding the device, not looking at one.
 */
body.device{display:grid;place-items:center;height:100vh;overflow:hidden}
.tablet{
  position:relative;z-index:2;
  width:min(92vw, calc(84vh * 1.5), 1240px);
  aspect-ratio:3/2;
  background:#05070c;
  border-radius:26px;
  padding:16px;
  box-shadow:
    0 40px 100px -24px rgba(0,0,0,.8),
    0 0 0 1px rgba(237,230,214,.07),
    0 8px 40px -12px rgba(232,168,76,.10);
}
.tablet .cam{
  position:absolute;top:7px;left:50%;transform:translateX(-50%);
  width:6px;height:6px;border-radius:50%;background:#1c2534;
}
.tscreen{
  position:relative;width:100%;height:100%;overflow:hidden;
  border-radius:12px;background:var(--night);
}
/* inside the screen, viewport-anchored things anchor to the screen instead */
.tscreen .statusbar{position:absolute}
.tscreen .scene{height:36%}
.tscreen .glance{top:3.1rem;left:2rem}
.tscreen .glance .day{font-size:1.6rem}
.tscreen .desk{height:100%;padding:8.2rem 2.2rem 1rem;gap:1.8rem 2.2rem}
@media (max-width:700px), (max-height:520px){
  body.device{display:block;height:auto;overflow:auto}
  .tablet{width:100%;max-width:none;aspect-ratio:auto;height:100vh;
    padding:0;border-radius:0;box-shadow:none}
  .tablet .cam{display:none}
  .tscreen{border-radius:0}
}