/* path: artikleapp/static/css/ak.css
   Artikle design system - same palette and type as the React site (teal / gold / paper). */
:root{
  --teal:#0F3B3C; --teal-2:#16504F; --teal-soft:#E3EEEC;
  --gold:#B8894A; --gold-soft:#D9C29A;
  --navy:#2B4C8C; --navy-soft:#EEF2FB; --navy-line:#C5D3F0;
  --ink:#1A1A1A; --ink-2:#4A5552; --muted:#6B6560; --hint:#9A948E;
  --bg:#FAF9F6; --paper:#F4F1E8; --card:#fff; --line:#D1CBC0; --line-2:#E8E4DF; --hover:#F1EFE8;
  --ok:#2D7A4F; --ok-bg:#EAF3DE; --ok-line:#97C459;
  --warn:#92400E; --warn-bg:#FFF8E1; --warn-line:#F6E05E;
  --err:#9B2335; --err-bg:#FCEBEB; --err-line:#F09595;
  --serif:'Source Serif 4','Noto Serif',Georgia,serif;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --r:10px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:15px/1.6 var(--sans);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
a{color:var(--navy);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;display:block}
h1,h2,h3,h4{margin:0 0 .5rem;line-height:1.3;font-weight:700;color:var(--ink)}
h1{font-size:1.5rem} h2{font-size:1.15rem} h3{font-size:1rem}
p{margin:0 0 .75rem}
.serif{font-family:var(--serif)}
.muted{color:var(--muted)} .hint{color:var(--hint);font-size:.8rem} .small{font-size:.85rem}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.82rem}
.wrap{max-width:1280px;margin:0 auto;padding:0 24px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:3px}

/* -- top navigation ---------------------------------------------------------------- */
.nav{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:100}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:12px;height:60px}
.brand{display:flex;align-items:center;gap:8px;color:var(--ink);font-weight:800;font-size:18px;letter-spacing:-.3px}
.brand:hover{text-decoration:none}
.brand-mark{width:28px;height:28px;background:var(--teal);border-radius:6px;display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--serif);font-size:17px}
.brand b{color:var(--teal)}
.nav-links{display:flex;gap:2px;align-items:center}
.nav-links a{padding:7px 12px;border-radius:7px;color:var(--ink);font-size:13px;font-weight:500}
.nav-links a:hover{background:var(--hover);text-decoration:none}
.nav-right{display:flex;align-items:center;gap:10px}
.cta-submit{display:inline-flex;align-items:center;gap:5px;padding:7px 14px;background:#E1F5EE;border:1px solid #5DCAA5;border-radius:7px;font-size:12px;font-weight:600;color:#085041}
.cta-submit:hover{background:#0F6E56;color:#fff;border-color:#0F6E56;text-decoration:none}
.user-menu{position:relative}
.user-btn{display:flex;align-items:center;gap:8px;background:none;border:1px solid var(--line);border-radius:8px;padding:5px 10px;cursor:pointer;font:inherit}
.avatar{width:26px;height:26px;border-radius:50%;background:var(--teal);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0;overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover}
.avatar-lg{width:64px;height:64px;font-size:20px}
.menu{position:absolute;right:0;top:calc(100% + 6px);background:#fff;border:1px solid var(--line);border-radius:10px;min-width:210px;box-shadow:0 8px 24px rgba(0,0,0,.1);padding:6px 0;display:none;z-index:200}
.menu.open{display:block}
.menu a,.menu button{display:block;width:100%;text-align:left;padding:9px 16px;font-size:13px;color:var(--ink);background:none;border:0;cursor:pointer;font-family:inherit}
.menu a:hover,.menu button:hover{background:var(--bg);text-decoration:none}
.menu .danger{color:var(--err);border-top:1px solid var(--line-2)}
.menu-toggle{display:none;background:none;border:1px solid var(--line);border-radius:7px;padding:6px 9px;cursor:pointer;font-size:16px;line-height:1}
.util{background:var(--teal);color:#fff;padding:0 24px}
.util-in{max-width:1280px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:38px;flex-wrap:wrap;padding:4px 0}
.util a{color:rgba(255,255,255,.62);font-size:11px;margin-left:16px}
.util a:hover{color:#fff}
.util .gold{color:var(--gold-soft);font-weight:600;text-transform:uppercase;letter-spacing:.3px}
.util form{flex:0 1 320px;min-width:180px}
.util input{width:100%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:6px;color:#fff;font-size:12px;padding:5px 10px}
.util input::placeholder{color:rgba(255,255,255,.5)}
.staff-bar{background:#7C2D12;color:#fff;font-size:12px;text-align:center;padding:5px 12px}
.staff-bar a{color:#FDE68A;font-weight:600}

/* -- page layout -------------------------------------------------------------------- */
.shell{display:flex;min-height:calc(100vh - 98px)}
.side{width:224px;flex-shrink:0;background:#fff;border-right:1px solid var(--line);padding:14px 6px;position:sticky;top:60px;align-self:flex-start;max-height:calc(100vh - 60px);overflow-y:auto}
.side-h{font-size:10px;font-weight:700;color:var(--hint);letter-spacing:.09em;text-transform:uppercase;padding:10px 14px 4px;display:block}
.side a{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 14px;border-radius:8px;font-size:13px;color:#444441}
.side a:hover{background:var(--hover);text-decoration:none}
.side a.on{background:var(--navy-soft);color:var(--navy);font-weight:600}
.side hr{border:0;border-top:1px solid #F0EDE8;margin:6px 14px}
.side .tag{font-size:9px;background:var(--navy);color:#fff;padding:1px 6px;border-radius:4px;font-weight:700}
.side .soon{font-size:9px;background:var(--hover);color:var(--hint);padding:1px 6px;border-radius:4px;font-weight:700}
.main{flex:1;min-width:0;padding:28px 28px 60px}
.main-narrow{max-width:860px}
.page-h{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.page-h p{margin:4px 0 0;color:var(--muted);font-size:13px}
.public-main{min-height:60vh}

/* -- cards, grids ------------------------------------------------------------------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:22px}
.card+.card{margin-top:16px}
.grid>.card+.card,.grid>*+.card{margin-top:0}
.grid+.card,.grid+.grid,.card+.grid,.table-wrap+.card,.table-wrap+.empty,.empty+.card{margin-top:16px}
.stack>.box+.box,.stack>details+details{margin-top:10px}
.card-h{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px}
.card-h h2{margin:0}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.stack>*+*{margin-top:16px}
.split{grid-template-columns:minmax(0,2fr) minmax(0,1fr);align-items:start}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.spread{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.stat{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.stat b{display:block;font-size:26px;font-weight:800;color:var(--teal);line-height:1.1}
.stat span{font-size:12px;color:var(--muted)}

/* -- buttons ------------------------------------------------------------------------ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 18px;border-radius:8px;border:1px solid transparent;font:600 13px/1.2 var(--sans);cursor:pointer;background:var(--teal);color:#fff;white-space:nowrap}
.btn:hover{background:var(--teal-2);text-decoration:none}
.btn[disabled]{opacity:.6;cursor:not-allowed}
.btn-navy{background:var(--navy)} .btn-navy:hover{background:#1E3A70}
.btn-ok{background:var(--ok)} .btn-ok:hover{background:#246340}
.btn-ghost{background:#fff;color:var(--ink);border-color:var(--line)} .btn-ghost:hover{background:var(--hover)}
.btn-danger{background:#fff;color:var(--err);border-color:var(--err-line)} .btn-danger:hover{background:var(--err-bg)}
.btn-warn{background:var(--warn-bg);color:var(--warn);border-color:var(--warn-line)} .btn-warn:hover{background:#FEF3C7}
.btn-sm{padding:6px 10px;font-size:12px;border-radius:7px}
.btn-block{width:100%}
.link-btn{background:none;border:0;color:var(--navy);cursor:pointer;font:inherit;padding:0}

/* -- forms -------------------------------------------------------------------------- */
.field{margin-bottom:16px}
.field label,.lbl{display:block;font-size:12px;font-weight:700;color:#444;margin-bottom:5px;letter-spacing:.02em}
.req{color:var(--err);margin-left:2px}
.input,.field input[type=text],.field input[type=email],.field input[type=password],.field input[type=tel],.field input[type=number],.field input[type=url],.field input[type=date],.field input:not([type]),.field select,.field textarea{
  width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:8px;font:14px var(--sans);color:var(--ink);background:#fff;outline:none}
.field textarea{resize:vertical;min-height:110px}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--navy);box-shadow:0 0 0 3px rgba(43,76,140,.12)}
.field .err{color:var(--err);font-size:12px;margin-top:4px}
.field.has-err input,.field.has-err select,.field.has-err textarea{border-color:var(--err-line)}
.field .help{color:var(--hint);font-size:12px;margin-top:4px}
.check{display:flex;gap:10px;align-items:flex-start;font-size:13px;cursor:pointer;margin-bottom:10px}
.check input{margin-top:3px;width:16px;height:16px;accent-color:var(--navy);flex-shrink:0}
.check small{display:block;color:var(--hint);font-size:12px}
.otp{font-size:24px!important;letter-spacing:10px;text-align:center;font-family:ui-monospace,monospace!important}
.choice-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.choice{position:relative}
.choice input{position:absolute;opacity:0}
.choice span{display:block;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--bg);cursor:pointer;font-size:12px;font-weight:600;height:100%}
.choice span small{display:block;font-weight:400;color:var(--hint);font-size:11px;margin-top:2px}
.choice input:checked+span{border-color:var(--navy);background:var(--navy-soft);color:var(--navy)}
.choice input:focus-visible+span{outline:2px solid var(--gold)}
.section-t{font-size:15px;font-weight:700;margin:0 0 14px;display:flex;align-items:center;gap:8px}
.section-t .n{width:24px;height:24px;border-radius:50%;background:var(--navy);color:#fff;font-size:12px;display:inline-flex;align-items:center;justify-content:center}
.drop{border:2px dashed var(--line);border-radius:12px;padding:28px 18px;text-align:center;background:var(--bg);cursor:pointer;transition:all .15s}
.drop.over{border-color:var(--navy);background:var(--navy-soft)}
.drop.has{border-color:var(--ok);background:var(--ok-bg)}
.drop input{display:none}
.drop strong{display:block;font-size:14px}
.ca-row{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:14px;margin-bottom:10px}
.ca-row .grid{gap:10px}
.ca-row .field{margin-bottom:0}
.auth-wrap{min-height:calc(100vh - 98px);display:flex;align-items:flex-start;justify-content:center;padding:48px 16px;background:var(--paper)}
.auth-card{width:100%;max-width:440px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:30px 28px;box-shadow:0 8px 30px rgba(15,59,60,.06)}
.auth-card.wide{max-width:560px}
.auth-card h1{font-family:var(--serif);font-size:1.6rem;color:var(--teal)}
.auth-foot{margin-top:18px;font-size:13px;color:var(--muted);text-align:center}

/* -- alerts, badges ----------------------------------------------------------------- */
.flash{padding:11px 14px;border-radius:8px;font-size:13px;margin-bottom:12px;border:1px solid}
.flash-success{background:var(--ok-bg);border-color:var(--ok-line);color:#27500A}
.flash-error{background:var(--err-bg);border-color:var(--err-line);color:var(--err)}
.flash-warning{background:var(--warn-bg);border-color:var(--warn-line);color:var(--warn)}
.flash-info{background:var(--navy-soft);border-color:var(--navy-line);color:var(--navy)}
.badge{display:inline-flex;align-items:center;padding:2px 9px;border-radius:20px;font-size:11px;font-weight:600;border:1px solid;white-space:nowrap}
.b-gray{background:#F1EFE8;border-color:#B4B2A9;color:#444441}
.b-blue{background:#E6F1FB;border-color:#85B7EB;color:#0C447C}
.b-amber{background:#FAEEDA;border-color:#EF9F27;color:#633806}
.b-orange{background:#FAECE7;border-color:#F0997B;color:#4A1B0C}
.b-green{background:#EAF3DE;border-color:#97C459;color:#27500A}
.b-red{background:#FCEBEB;border-color:#F09595;color:#501313}
.b-purple{background:#F3EEFC;border-color:#C4B5FD;color:#4C1D95}

/* -- tables, lists ------------------------------------------------------------------ */
.table-wrap{background:#fff;border:1px solid var(--line-2);border-radius:10px;overflow-x:auto}
.table{width:100%;border-collapse:collapse;font-size:13px}
.table th{text-align:left;font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;padding:10px 16px;background:#FBFAF7;border-bottom:1px solid #EFECE6;white-space:nowrap}
.table td{padding:12px 16px;border-bottom:1px solid #F0EDE8;vertical-align:middle}
.table tr:last-child td{border-bottom:0}
.table .title-cell a{color:var(--ink);font-weight:500}
.group-h{display:flex;align-items:center;gap:8px;margin:18px 0 8px;flex-wrap:wrap}
.group-h .dot{width:10px;height:10px;border-radius:3px}
.group-h h3{margin:0;font-size:13px;font-weight:800}
.kv{display:grid;grid-template-columns:150px 1fr;gap:6px 14px;font-size:13px}
.kv dt{color:var(--muted)} .kv dd{margin:0;word-break:break-word}
.timeline{list-style:none;margin:0;padding:0;border-left:2px solid var(--line-2);margin-left:6px}
.timeline li{position:relative;padding:0 0 14px 18px;font-size:13px}
.timeline li::before{content:"";position:absolute;left:-7px;top:4px;width:12px;height:12px;border-radius:50%;background:#fff;border:2px solid var(--navy)}
.timeline li:last-child::before{background:var(--navy)}
.empty{padding:48px 20px;text-align:center;background:#fff;border:1px solid var(--line);border-radius:10px;color:var(--muted)}
.pager{display:flex;justify-content:center;gap:8px;margin-top:20px;align-items:center;font-size:13px}
.path-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:20px}
.path{display:block;background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px;color:var(--ink);position:relative;transition:background .15s,border-color .15s}
.path:hover{text-decoration:none;border-color:var(--navy);background:var(--navy-soft)}
.path h3{font-size:15px;margin:10px 0 6px}
.path p{font-size:12.5px;color:var(--muted);margin:0 0 10px}
.path ul{margin:0 0 12px;padding-left:16px;font-size:11.5px;font-weight:600;color:var(--navy)}
.path .go{font-size:12px;font-weight:800;color:var(--navy)}
.path .ic{width:42px;height:42px;border-radius:10px;background:var(--navy-soft);display:flex;align-items:center;justify-content:center;font-size:19px}
.path.rec{border-color:var(--navy)}
.path .rib{position:absolute;top:-10px;left:50%;transform:translateX(-50%);background:var(--navy);color:#fff;padding:2px 12px;border-radius:20px;font-size:10px;font-weight:800;letter-spacing:.06em}
.note{display:flex;gap:10px;padding:13px 16px;border-radius:10px;font-size:12.5px;border:1px solid}
.note-ok{background:var(--ok-bg);border-color:var(--ok-line);color:#27500A}
.note-warn{background:var(--warn-bg);border-color:var(--warn-line);color:#6B4E16}
.note-info{background:var(--navy-soft);border-color:var(--navy-line);color:var(--navy)}
.quota{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:center;background:#fff;border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:10px;padding:14px 18px;margin-bottom:16px;font-size:13px}
.quota b{color:var(--teal)}
.feedback{background:#FFFDF7;border:1px solid #F0E6C8;border-radius:10px;padding:6px 16px 12px}
.feedback .fb-h{font-size:11px;font-weight:800;color:var(--warn);text-transform:uppercase;letter-spacing:.04em;padding:10px 0 4px}
.fb-item{display:flex;gap:10px;padding:9px 0;border-top:1px solid #F3EAD0;font-size:13.5px;line-height:1.6}
.fb-item:first-of-type{border-top:0}
.fb-n{flex-shrink:0;width:24px;height:24px;border-radius:50%;background:var(--navy);color:#fff;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center}
.pre{white-space:pre-wrap}
details.box{background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px 16px}
details.box summary{cursor:pointer;font-weight:600;font-size:13px}

/* -- public pages ------------------------------------------------------------------- */
.hero{background:var(--paper);padding:64px 0 48px;border-bottom:1px solid #E5DFD1}
.hero h1{font-family:var(--serif);font-weight:600;font-size:clamp(36px,5vw,60px);line-height:1.05;color:var(--teal);letter-spacing:-.02em;margin:0 0 14px}
.hero h1 em{color:var(--gold);font-style:normal}
.hero p{font-size:18px;color:var(--ink-2);max-width:34em}
.hero .row{margin-top:22px}
.pill-btn{border-radius:999px;padding:12px 22px;font-size:15px}
.stat-band{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:36px 0}
.footer{background:#0B2E2F;color:#C9D6D2;padding:44px 0 24px;margin-top:0}
.footer-top{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:28px}
.footer h4{font:600 15px var(--serif);color:#fff;margin:0 0 10px}
.footer a{color:#C9D6D2;display:block;font-size:14px;padding:3px 0}
.footer a:hover{color:#fff}
.footer-brand{font:600 26px var(--serif);color:#fff}
.footer-brand span{color:var(--gold-soft)}
.footer-bottom{margin-top:32px;padding-top:16px;border-top:1px solid rgba(217,194,154,.3);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:#9FB3AE}

/* -- maintenance / error ------------------------------------------------------------ */
.center-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:16px;background:var(--paper)}
.center-card{background:#fff;border:1px solid var(--line);border-top:5px solid var(--gold);border-radius:14px;padding:34px 28px;max-width:500px;width:100%;text-align:center;box-shadow:0 8px 30px rgba(15,59,60,.06)}
.center-card .brand{justify-content:center;margin-bottom:10px}
.center-card h1{font-family:var(--serif);color:var(--teal)}
.center-card.form{text-align:left}

/* -- composer / institution ----------------------------------------------------------- */
.tpl-card{border:1px solid var(--line);border-radius:10px;padding:14px;background:var(--bg);display:flex;flex-direction:column;align-items:flex-start}
.tpl-card .btn{margin-top:auto}
.cmp-area{font-family:var(--serif);font-size:15px!important;line-height:1.7}
.bar{height:8px;background:var(--hover);border-radius:6px;overflow:hidden}
.bar span{display:block;height:100%;background:var(--teal)}
.bar-row{display:grid;grid-template-columns:140px 1fr 44px;gap:10px;align-items:center;font-size:12.5px;margin-bottom:6px}
.bar-row .bar{height:10px}
.side .org-name{display:block;padding:4px 18px 8px;font-size:12px;font-weight:700;color:var(--teal);line-height:1.3}
.inline-form{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap}
.inline-form .field{margin-bottom:0}
.table td .input,.table td select{padding:5px 8px;font-size:12.5px}
.flow{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}
.flow span{font-size:11px;padding:3px 9px;border-radius:999px;background:var(--hover);color:var(--muted)}
.flow span.on{background:var(--teal);color:#fff}

.or-sep{display:flex;align-items:center;gap:10px;margin:16px 0;color:var(--hint);font-size:12px}
.or-sep::before,.or-sep::after{content:"";flex:1;border-top:1px solid var(--line)}

/* -- responsive --------------------------------------------------------------------- */
@media (max-width:1000px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.footer-top{grid-template-columns:1fr 1fr}}
@media (max-width:900px){
  .nav-links,.cta-submit{display:none}
  .menu-toggle{display:inline-block}
  .side{display:none;position:fixed;left:0;top:60px;bottom:0;max-height:none;width:260px;z-index:150;box-shadow:4px 0 24px rgba(0,0,0,.12)}
  .side.open{display:block}
  .main{padding:20px 16px 48px}
  .g3,.split{grid-template-columns:1fr}
}
@media (max-width:640px){
  .bar-row{grid-template-columns:100px 1fr 36px}
  .wrap{padding:0 16px}
  .g2,.stat-band,.choice-grid,.path-grid{grid-template-columns:1fr}
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat b{font-size:20px}
  .kv{grid-template-columns:1fr}
  .util{padding:0 16px}
  .util a{margin-left:10px}
  .card{padding:16px}
  .footer-top{grid-template-columns:1fr}
  .hide-sm{display:none}
}