/* ============================================================
   NOTE — shell tokens copied from palette.kindas.se (which took
   them from blueprint.kindas.se) so the sites read as one system.
   Prefix: --sg-*
   ============================================================ */
:root{
  /* dark mode, not a colour: the browser picks its own native dark
     (Canvas), so the page meets the iOS status bar / toolbar with no
     visible seam. Same thing tldraw's dark mode does. */
  color-scheme:dark;
  --sg-bg:Canvas;
  --sg-surface:#191919;
  --sg-surface-2:#212121;
  --sg-sunken:Canvas;

  --sg-line:#2a2a2a;
  --sg-line-2:#333;

  --sg-accent:#888;
  --sg-accent-dim:#444;
  --sg-accent-ghost:rgba(140,140,140,.08);

  --sg-tx:#d8d8d8;
  --sg-tx-2:#999;
  --sg-tx-3:#666;

  --sg-ease:cubic-bezier(.2,.7,.2,1);

  --sg-sans:'Inter',system-ui,-apple-system,sans-serif;
  --sg-mono:'JetBrains Mono',ui-monospace,monospace;

  /* phone first: the app never grows wider than a large phone */
  --phone:430px;
  --bar:44px;
  --tagbar:36px;
  --topbar:40px;
}

@font-face{
  font-family:'Open Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/open-sans-v13-latin-regular.woff2') format('woff2'),url('fonts/open-sans-v13-latin-regular.woff') format('woff');
}

*{box-sizing:border-box}
html,body{margin:0;height:100%}

html{background:var(--sg-sunken)}
body{
  background:var(--sg-sunken);color:var(--sg-tx);font-family:var(--sg-sans);
  font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;text-size-adjust:100%;
  overscroll-behavior:none;
}

::selection{background:rgba(140,140,140,.25);color:var(--sg-tx)}
button{font-family:inherit;color:inherit;cursor:pointer;background:none;border:none;padding:0}
[hidden]{display:none!important}

/* ============================================================ SHELL
   One phone-wide column, centred. On a phone it is the whole screen;
   on anything wider the rest is sunken background. */
.app{
  position:relative;
  display:grid;grid-template-rows:1fr auto;
  width:100%;max-width:var(--phone);margin:0 auto;
  height:100vh;height:100dvh;
  background:var(--sg-bg);
  padding-top:env(safe-area-inset-top);
}
@media(min-width:431px){
  .app{border-left:1px solid var(--sg-line);border-right:1px solid var(--sg-line)}
}

.views{position:relative;min-height:0;overflow:hidden}
.view{position:absolute;inset:0}
.view-note{display:flex;flex-direction:column}

/* ============================================================ WRITER
   The write.as/new textarea, rule for rule (k-note: write.css
   body#pad textarea + textarea.norm). Only `position:fixed` became
   `absolute` so it stays inside the phone column, and the colours
   are the palette greys.
   2026-09-24: side padding halved (2em → 1em), size 1.2em → 1.1em,
   font switched to write.as's sans (Open Sans). Later: 1.1em → 1em. */
#writer,
#writer:focus{border:0;outline:0}
#writer{
  position:relative;flex:1 1 auto;min-height:0;
  width:100%;
  margin:0;
  padding:1em 1em 2em;
  font-size:1em;
  letter-spacing:.6px;
  line-height:1.4;
  resize:none;
  white-space:pre-wrap;
  word-wrap:break-word;
  background:var(--sg-bg);
  color:var(--sg-tx);
  caret-color:var(--sg-tx);
  -webkit-appearance:none;appearance:none;border-radius:0;
}
#writer.sans{font-family:"Open Sans","Segoe UI",Tahoma,Arial,sans-serif}
#writer::placeholder{color:var(--sg-tx-3);opacity:1}

#writer::-webkit-scrollbar{width:6px}
#writer::-webkit-scrollbar-thumb{background:var(--sg-line-2);border-radius:20px}
#writer::-webkit-scrollbar-track{background:transparent}

/* ============================================================ TOPBAR
   Two tools from write.as's #tools header: the target dropdown in the
   middle ("Anonymous" there, "floppy" here) and Publish on the right
   ("send" here). Note view only. Both inert for now. */
.topbar{
  flex:0 0 auto;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  height:var(--topbar);
  padding:0 .5em;
}
.target-pick{grid-column:2;height:100%;padding:0 1.8em 0 .8em;background-position:right .6em center}
.send{
  grid-column:3;justify-self:end;
  height:28px;padding:0 .9em;
  font-family:var(--sg-sans);font-size:13px;font-weight:600;
  color:var(--sg-tx);
  -webkit-tap-highlight-color:transparent;
}
.send:active{background:var(--sg-accent-ghost)}

/* ============================================================ TAGBAR
   Glued to the top of the menubar, note view only. Same six-column
   grid as the menubar so the seams line up: tag picker over
   note·meta·plan, add over chat, tags/link picker over dash·logo.
   Native <select>s so iOS opens its own picker; maximum-scale=1 in
   the viewport keeps iOS from zooming on the small font. */
.tagbar{
  flex:0 0 auto;
  display:grid;grid-template-columns:repeat(6,1fr);
  height:var(--tagbar);
  border-top:1px solid var(--sg-line);
  background:var(--sg-surface);
}
.pick{
  min-width:0;
  margin:0;padding:0 2em 0 .9em;
  font-family:var(--sg-sans);font-size:13px;
  color:var(--sg-tx);background-color:transparent;
  border:0;border-radius:0;outline:0;
  -webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23888' stroke-width='1.2'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .8em center;background-size:9px 5px;
}
.pick option{color:CanvasText;background:Canvas}
.tag-pick{grid-column:span 3}
.tag-pick:invalid,
.tag-pick.is-empty{color:var(--sg-tx-3)}
.kind-pick{grid-column:span 2;border-left:1px solid var(--sg-line)}
.tag-add{
  grid-column:span 1;
  border-left:1px solid var(--sg-line);
  font-family:var(--sg-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--sg-tx-2);
  -webkit-tap-highlight-color:transparent;
}
.tag-add:active{background:var(--sg-accent-ghost)}

/* ============================================================ MENUBAR */
.menubar{
  display:grid;grid-template-columns:repeat(6,1fr);
  height:calc(var(--bar) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  background:var(--sg-surface);
  border-top:1px solid var(--sg-line);
}

.tab{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  height:var(--bar);
  font-family:var(--sg-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--sg-tx-3);
  -webkit-tap-highlight-color:transparent;
  transition:color .15s var(--sg-ease),background .15s var(--sg-ease);
}
.tab + .tab{border-left:1px solid var(--sg-line)}
.tab-icon{width:20px;height:20px;display:block;opacity:.55;transition:opacity .15s var(--sg-ease)}
.tab[aria-current="page"] .tab-icon{opacity:1}
.tab:active{background:var(--sg-accent-ghost)}
.tab:focus-visible{outline:1px solid var(--sg-accent-dim);outline-offset:-4px}

.tab[aria-current="page"]{color:var(--sg-tx);background:var(--sg-accent-ghost)}
.tab[aria-current="page"]::before{
  content:'';position:absolute;top:-1px;left:0;right:0;height:1px;
  background:var(--sg-accent);
}

@media(hover:hover){
  .tab:hover{color:var(--sg-tx-2)}
  .tab[aria-current="page"]:hover{color:var(--sg-tx)}
}

@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}