/* TMW – redaktionellt, brutalt enkelt. Typografin gör jobbet.
   Palett: svart, vitt, grått. Grönt bara för TMW och "nytt". Inga rundningar, skuggor eller ikoner. */
:root {
  --bg: #fff;
  --ink: #000;
  --grey: #8a8a8a;
  --faint: #c9c9c9;
  --line: #000;
  --hair: #e8e8e8;
  --green: #8ace00;
  --pad: 20px;
  --tab-h: 52px;
  --ease: cubic-bezier(.25, .8, .25, 1);
  color-scheme: light;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; border-radius: 0; }
html, body { margin: 0; background: var(--bg); color: var(--ink); }
body {
  font: 400 17px/1.4 -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; letter-spacing: -.005em;
  overscroll-behavior: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
input, textarea, .post .body, .sb { -webkit-user-select: text; user-select: text; }
button, input, textarea, select { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; -webkit-appearance: none; appearance: none; }
button { cursor: pointer; text-align: left; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

#app { max-width: 600px; margin: 0 auto; min-height: 100dvh; padding: calc(env(safe-area-inset-top) + 14px) var(--pad) calc(env(safe-area-inset-bottom) + var(--tab-h) + 48px); }

/* ---- Typografi ---- */
.top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 34px; }
.logo { font-weight: 900; font-size: 15px; letter-spacing: .22em; color: var(--green); }
.me { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.me.new::after, .new-mark { content: "•"; color: var(--green); margin-left: 4px; }
h1 { font-size: 46px; line-height: .92; letter-spacing: -.045em; font-weight: 800; text-transform: uppercase; margin: 0 0 8px; overflow-wrap: anywhere; }
.date { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--grey); margin: 0 0 30px; }
h2, .label { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--grey); margin: 40px 0 12px; display: block; }
.grey { color: var(--grey); }
.empty { color: var(--grey); padding: 4px 0 8px; }
.num { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---- Textknappar ---- */
.act { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 12px 0; display: inline-block; }
.act + .act { margin-left: 22px; }
.act.grey { color: var(--grey); }
.btn { display: block; width: 100%; padding: 17px 0; background: var(--ink); color: var(--bg); font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; text-align: center; margin-top: 26px; }
.btn.line { background: none; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn:active { opacity: .7; }
.switch { display: flex; gap: 22px; margin: 0 0 26px; }
.switch button { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); padding: 6px 0; }
.switch button.on { color: var(--ink); }

/* ---- Fält ---- */
.field { display: block; width: 100%; border-bottom: 1.5px solid var(--ink); padding: 14px 0; outline: none; font-size: 19px; }
.field::placeholder { color: var(--faint); }
textarea.field { resize: none; min-height: 140px; line-height: 1.45; }
select.field { font-size: 17px; }
.check { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; font-size: 17px; cursor: pointer; }
.check input { width: 44px; height: 26px; position: relative; flex: none; box-shadow: inset 0 0 0 1.5px var(--ink); cursor: pointer; }
.check input::after { content: "AV"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.check input:checked { background: var(--ink); color: var(--bg); }
.check input:checked::after { content: "PÅ"; }

/* ---- Listor av rader (kalender, inställningar, money) ---- */
.r { display: flex; gap: 16px; align-items: baseline; padding: 11px 0; }
.r .t { width: 50px; flex: none; font-size: 15px; font-variant-numeric: tabular-nums; }
.r .b { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.r .m { font-size: 14px; color: var(--grey); margin-top: 1px; }
.r .v { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--grey); white-space: nowrap; }
.r.off .x { text-decoration: line-through; color: var(--grey); }
.tap { cursor: pointer; }
.tap:active { opacity: .5; }

/* ---- Navigering ---- */
.tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--bg); box-shadow: 0 -1px 0 var(--hair); padding-bottom: env(safe-area-inset-bottom); }
.tabs nav { max-width: 600px; margin: 0 auto; display: flex; height: var(--tab-h); padding: 0 calc(var(--pad) - 6px); }
.tabs a { flex: 1; display: flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; color: var(--faint); }
.tabs a.on { color: var(--ink); }
.tabs a sup { color: var(--green); font-size: 9px; margin-left: 2px; }

/* ---- CLEAR ---- */
.add { display: block; width: 100%; font-size: 22px; font-weight: 600; letter-spacing: -.02em; padding: 10px 0 22px; outline: none; }
.add::placeholder { color: var(--faint); }
.item { position: relative; overflow: hidden; transition: max-height .32s var(--ease), opacity .32s var(--ease); max-height: 200px; }
.item.gone { max-height: 0 !important; opacity: 0; }
.item .hint { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; font-size: 11px; font-weight: 800; letter-spacing: .12em; color: var(--grey); opacity: 0; }
.item .hint.l { left: 0; } .item .hint.r { right: 0; }
.item .row { position: relative; background: var(--bg); padding: 13px 0; font-size: 22px; line-height: 1.22; font-weight: 600; letter-spacing: -.02em; touch-action: pan-y; transition: transform .34s var(--ease), color .3s var(--ease); will-change: transform; cursor: pointer; overflow-wrap: anywhere; }
.item .row.drag { transition: color .3s var(--ease); }
.item .txt { text-decoration: line-through; text-decoration-color: transparent; transition: text-decoration-color .3s var(--ease), color .3s var(--ease); outline: none; }
.item.done .txt { color: var(--faint); text-decoration-color: var(--faint); }
.item .who { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--grey); margin-left: 8px; vertical-align: 3px; }
.item .txt[contenteditable="true"] { box-shadow: 0 1.5px 0 var(--ink); }

/* ---- Toast ---- */
.toast { position: fixed; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom) + var(--tab-h)); z-index: 40; background: var(--ink); color: var(--bg); padding: 15px var(--pad); display: flex; justify-content: space-between; gap: 16px; font-size: 15px; transform: translateY(100%); opacity: 0; visibility: hidden; transition: transform .3s var(--ease), opacity .3s, visibility 0s .3s; white-space: nowrap; }
.toast span { overflow: hidden; text-overflow: ellipsis; }
.toast.show { transform: none; opacity: 1; visibility: visible; transition: transform .3s var(--ease), opacity .3s; }
.toast button { color: var(--green); font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }

/* ---- Ark (formulär) ---- */
.sheet-bg { position: fixed; inset: 0; z-index: 50; background: rgba(255,255,255,.7); opacity: 0; transition: opacity .25s; }
.sheet-bg.show { opacity: 1; }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 51; max-width: 600px; margin: 0 auto; background: var(--bg); box-shadow: 0 -1.5px 0 var(--ink); padding: 18px var(--pad) calc(env(safe-area-inset-bottom) + 22px); max-height: 92dvh; overflow: auto; transform: translateY(100%); transition: transform .32s var(--ease); }
.sheet.show { transform: none; }
.sheet h3 { font-size: 28px; line-height: 1; letter-spacing: -.035em; font-weight: 800; text-transform: uppercase; margin: 8px 0 18px; }
.sheet .close { float: right; font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--grey); padding: 10px 0 10px 20px; }

/* ---- Blogg ---- */
.post { padding: 0 0 46px; }
.post .meta { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--grey); display: flex; justify-content: space-between; margin-bottom: 10px; }
.post h4 { font-size: 28px; line-height: 1.02; letter-spacing: -.035em; font-weight: 800; margin: 0 0 10px; overflow-wrap: anywhere; }
.post .body { white-space: pre-line; overflow-wrap: anywhere; font-size: 18px; line-height: 1.45; }
.post img { margin: 14px calc(var(--pad) * -1) 0; width: calc(100% + var(--pad) * 2); max-width: none; height: auto; }
.post .url { display: block; margin-top: 12px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; overflow-wrap: anywhere; }
.post .url::after { content: " →"; }
.write { position: fixed; z-index: 25; right: var(--pad); bottom: calc(env(safe-area-inset-bottom) + var(--tab-h) + 16px); background: var(--ink); color: var(--bg); font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; padding: 13px 18px; }

/* ---- Vecka ---- */
.day { padding: 0 0 28px; }
.day .dh { font-size: 22px; font-weight: 800; letter-spacing: -.02em; text-transform: uppercase; margin-bottom: 4px; }
.day .dh span { color: var(--grey); font-weight: 600; margin-left: 6px; }
.day.today .dh { color: var(--ink); }
.day.today .dh::before { content: "IDAG "; color: var(--green); }
.day.past { color: var(--faint); }
.day.past .r .m, .day.past .r .t { color: var(--faint); }
.weeknav { display: flex; justify-content: space-between; margin: -18px 0 26px; }

/* ---- Money ---- */
.big { font-size: 56px; font-weight: 800; letter-spacing: -.05em; line-height: .95; font-variant-numeric: tabular-nums; }
.kid { padding: 0 0 30px; }
.kid .name { font-size: 22px; font-weight: 800; text-transform: uppercase; letter-spacing: -.02em; }
.kid .amt { font-size: 40px; font-weight: 800; letter-spacing: -.045em; font-variant-numeric: tabular-nums; line-height: 1.05; margin-top: 2px; }
.kid .facts { font-size: 14px; color: var(--grey); margin-top: 6px; }
.flag { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }

/* ---- Inloggning ---- */
.login h1 { font-size: 64px; }
.login .logo { font-size: 22px; display: block; margin-bottom: 70px; }
.choice { display: block; width: 100%; font-size: 34px; font-weight: 800; letter-spacing: -.04em; text-transform: uppercase; line-height: 1.05; padding: 9px 0; }
.choice:active { color: var(--grey); }
.pinfield { font-size: 40px; font-weight: 800; letter-spacing: .3em; -webkit-text-security: disc; text-security: disc; }
.err { color: var(--ink); font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; min-height: 18px; margin-top: 14px; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
.h-switch button { font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--faint); }
.h-switch button.on { color: var(--ink); }