/* Shared look for the account pages (account / planner / my map / shared). */
:root{
  color-scheme:light;
  --bg:#FAF3E3; --surface:#FFFCF3; --ink:#2A2216; --muted:#786952; --line:#E5D8BD; --soft:#F1E7CF; --hover:#F4ECD9;
  --acc:#B34A13; --acc-fg:#FFF8EE; --teal:#0C8B87; --good:#2E7D4F; --bad:#B3261E;
  --logo-name:#0C8B87; --logo-to:#FF5A3C; --sbreak:#FFFFFF;
  --display:"Fraunces",Georgia,serif; --body:"Work Sans",ui-sans-serif,system-ui,sans-serif;
  --mono:"Courier Prime",ui-monospace,Menlo,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#232946; --surface:#2C3357; --ink:#ECEFFC; --muted:#A2A9CB; --line:#3C4470; --soft:#292F52; --hover:#333B63;
    --acc:#EEB144; --acc-fg:#2B2108; --teal:#5FE0D8; --good:#7FD1A0; --bad:#F2A099;
    --logo-name:#5FE0D8; --logo-to:#FF6B4D; --sbreak:#454E7C;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#232946; --surface:#2C3357; --ink:#ECEFFC; --muted:#A2A9CB; --line:#3C4470; --soft:#292F52; --hover:#333B63;
  --acc:#EEB144; --acc-fg:#2B2108; --teal:#5FE0D8; --good:#7FD1A0; --bad:#F2A099;
  --logo-name:#5FE0D8; --logo-to:#FF6B4D; --sbreak:#454E7C;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.6 var(--body);-webkit-font-smoothing:antialiased;overflow-x:clip}
.wrap{max-width:1100px;margin:0 auto;padding:24px 20px 64px}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* header */
.apphead{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;flex-wrap:wrap;margin-bottom:8px}
.lgo{display:inline-block;line-height:0}
.lgo svg{height:30px;width:auto;display:block}
.hnav{display:flex;gap:6px;flex-wrap:wrap;align-items:center;justify-content:flex-end}
.hnav a{display:inline-block;padding:6px 11px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink);font-weight:500;font-size:11.5px;text-decoration:none;transition:border-color .15s;white-space:nowrap}
.hnav a:hover{border-color:var(--acc)}
.hnav a.on{border-color:var(--acc);color:var(--acc)}
#theme{width:30px;height:30px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;background:var(--surface)}
#theme svg{width:16px;height:16px;fill:none;stroke:var(--muted);stroke-width:1.8;stroke-linecap:round}
:root[data-theme="light"] .moon{display:none}
:root[data-theme="dark"] .sun{display:none}
.sbreakbar{height:10px;width:100vw;margin:18px calc(50% - 50vw) 26px;background:var(--sbreak)}

h1{font:650 clamp(28px,5vw,40px)/1.1 var(--display);letter-spacing:-.015em;margin:8px 0 6px}
h2{font:640 clamp(19px,3vw,24px)/1.2 var(--display);margin:26px 0 10px}
.sub{color:var(--muted);margin:0 0 22px;max-width:66ch}

/* cards, fields, buttons */
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:20px}
.field{margin:0 0 14px}
.field label{display:block;font:600 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],select,textarea{
  width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink);font:inherit}
textarea{min-height:84px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid var(--acc);outline-offset:1px;border-color:transparent}
.btn{display:inline-block;padding:11px 20px;border-radius:999px;background:var(--acc);color:var(--acc-fg);font-weight:600;border:1px solid transparent;text-decoration:none;text-align:center}
.btn:hover{filter:brightness(1.06)}
.btn2{display:inline-block;padding:10px 16px;border-radius:999px;background:var(--surface);border:1px solid var(--line);color:var(--ink);font-weight:500;text-decoration:none}
.btn2:hover{border-color:var(--acc)}
.btn.small,.btn2.small{padding:7px 13px;font-size:12.5px}
.danger{color:var(--bad)}
.msg{border:1px solid var(--line);border-radius:10px;background:var(--soft);padding:10px 14px;font-size:13.5px;margin:10px 0}
.msg.err{color:var(--bad)}
.msg.ok{color:var(--good)}
.mut{color:var(--muted)}
.mono{font-family:var(--mono)}
.rowline{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

/* combobox */
.cbox{position:relative}
.cbox ul{position:absolute;z-index:30;left:0;right:0;top:calc(100% + 4px);max-height:260px;overflow:auto;margin:0;padding:6px;list-style:none;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,.14)}
.cbox li{padding:9px 11px;border-radius:8px;cursor:pointer;font-size:14px}
.cbox li:hover,.cbox li.sel{background:var(--hover)}
.cbox li small{color:var(--muted);float:right}

/* planner board */
.board{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin:16px 0}
.mcol{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px;min-height:74px}
.mcol h4{margin:0 0 8px;font:600 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.tripc{border:1px solid var(--line);border-radius:10px;padding:9px 11px;margin-bottom:8px;cursor:pointer;background:var(--bg);transition:border-color .15s}
.tripc:hover{border-color:var(--acc)}
.tripc b{display:block;font-size:14px}
.tripc span{font-size:12px;color:var(--muted)}
.tripc .est{float:right;font:500 12px var(--mono);color:var(--acc)}
.badge{display:inline-block;padding:2px 9px;border-radius:999px;font-size:11px;font-weight:600}
.badge.in{background:color-mix(in srgb, var(--good) 16%, transparent);color:var(--good)}
.badge.off{background:var(--soft);color:var(--muted)}
.badge.prop{background:color-mix(in srgb, var(--acc) 14%, transparent);color:var(--acc)}

/* cashflow */
.cash{display:grid;grid-template-columns:repeat(12,1fr);gap:6px;align-items:end;height:90px;margin:10px 0 4px}
.cash i{display:block;background:var(--teal);opacity:.75;border-radius:4px 4px 0 0;min-height:2px}
.cashlab{display:grid;grid-template-columns:repeat(12,1fr);gap:6px;font:500 10px var(--mono);color:var(--muted);text-align:center}

/* drawer / dialog */
dialog{border:1px solid var(--line);border-radius:16px;background:var(--surface);color:var(--ink);padding:24px;max-width:520px;width:calc(100vw - 40px)}
dialog::backdrop{background:rgba(20,16,8,.45)}
.xcols3{display:grid;grid-template-columns:1fr;gap:14px;margin:12px 0}
.xcols3 h5{margin:0 0 6px;font:600 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--teal)}
.xcols3 .xi{font-size:13px;margin:0 0 6px}
.xcols3 .xi b{display:block}
.xcols3 .xi p{margin:0;color:var(--muted);font-size:12.5px}

table.plain{border-collapse:collapse;width:100%;font-size:13.5px}
table.plain td,table.plain th{border-bottom:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}
table.plain th{font:600 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

@media (max-width:700px){ .board{grid-template-columns:1fr 1fr} }
@media (max-width:460px){ .board{grid-template-columns:1fr} }

/* print — the shareable static summary */
@media print{
  .apphead,.hnav,#theme,.noprint,.sbreakbar{display:none!important}
  body{background:#fff;color:#222}
  .card{border:0;padding:0}
  .wrap{max-width:none;padding:0}
  a{text-decoration:none}
  body.print-one .screen{display:none!important}
  #printArea{display:block!important}
}
#printArea{display:none}

#fdock{position:fixed;right:16px;bottom:16px;z-index:70;display:flex;gap:8px;align-items:center}
#acctfab{display:inline-flex;align-items:center;gap:7px;padding:10px 16px;border-radius:999px;background:#FFFFFF;border:1px solid #E5D8BD;color:#0C8B87;font:600 13px var(--body);text-decoration:none;box-shadow:0 6px 20px rgba(20,14,6,.22);transition:border-color .15s}
#acctfab:hover{border-color:#FF5A3C}
#acctfab svg{height:15px;width:auto;display:block}
@media (max-width:600px){
  #fdock{gap:6px;right:10px;bottom:10px}
  #fdock select,#fdock #from{padding:7px 10px;font-size:12px}
  #acctfab{padding:8px 12px;font-size:12px}
  #acctfab svg{height:14px}
}
@media print{#fdock{display:none!important}}

.acctmenu{position:relative;display:inline-block}
.acctchip{width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:#FFFFFF;display:grid;place-items:center;cursor:pointer;padding:0}
.acctchip svg{height:15px;width:auto;display:block}
.acctdd{position:absolute;right:0;top:100%;padding-top:8px;display:none;z-index:90}
.acctmenu:hover .acctdd,.acctmenu:focus-within .acctdd{display:block}
.ddbox{min-width:172px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:6px;box-shadow:0 10px 28px rgba(20,14,6,.2)}
.ddbox a,.ddbox button{display:block;width:100%;text-align:left;padding:9px 12px;border-radius:8px;font:500 13px var(--body);color:var(--ink);text-decoration:none;background:none;border:0;cursor:pointer}
.ddbox a:hover,.ddbox button:hover{background:var(--hover)}

.hleft{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.pillrow{display:flex;gap:10px;flex-wrap:wrap}
.plannerbtn.worldbtn{background:var(--teal);color:var(--bg)}
.plannerbtn{display:inline-block;padding:10px 22px;border-radius:999px;background:var(--acc);color:var(--acc-fg);font:600 14px var(--body);text-decoration:none;box-shadow:0 4px 14px rgba(20,14,6,.14);transition:filter .15s}
.plannerbtn:hover{filter:brightness(1.08)}
.plannerbtn.on{outline:2px solid var(--acc);outline-offset:2px}

/* drag & drop */
.tripc{cursor:grab;touch-action:pan-y}
.tripc.dragging{opacity:.35}
.tripc.dragghost{position:fixed;z-index:999;pointer-events:none;margin:0;cursor:grabbing;
  transform:rotate(2.5deg) scale(1.05);box-shadow:0 18px 40px rgba(30,25,15,.28);opacity:.96;
  transition:none;background:var(--bg)}
.mcol.dropok{outline:2px dashed var(--acc);outline-offset:-2px;background:color-mix(in srgb,var(--acc) 7%,transparent)}
.nodragselect,body.nodragselect *{user-select:none!important;-webkit-user-select:none!important}

/* one-time welcome intro */
.welcomeo{position:fixed;inset:0;z-index:220;background:var(--bg);display:grid;place-items:center;
  text-align:center;opacity:1;transition:opacity .65s ease}
.welcomeo.wgone{opacity:0;pointer-events:none}
.welcomeo .win{animation:wfade 3.6s ease forwards;padding:0 24px}
.welcomeo .wtext{font-family:Fraunces,serif;font-weight:640;font-size:clamp(30px,7vw,58px);
  letter-spacing:-0.5px;color:var(--ink);margin-bottom:14px}
.welcomeo svg{width:clamp(220px,58vw,430px);height:auto;display:block;margin:0 auto}
@keyframes wfade{0%{opacity:0;transform:translateY(10px)}20%{opacity:1;transform:none}72%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion: reduce){.welcomeo .win{animation-duration:1.6s}}