/* Classic version: the current portal's menus and page names, simplified.
   Built on base.css (the shared AgQuest tokens and components). */
html{font-size:17px}
body.classic{background:var(--paper)}
.classic .main{background:var(--paper)}

/* ---------- header with the current menus ---------- */
.cl-top{position:sticky;top:0;z-index:30;background:var(--ground);border-bottom:1px solid var(--rule)}
.cl-top-in{max-width:calc(var(--measure) + 2*var(--gutter));margin:0 auto;display:flex;align-items:center;gap:24px;padding:10px var(--gutter);min-height:68px}
.cl-nav>ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:2px}
.cl-nav>ul>li{position:relative}
.cl-nav>ul>li>a,.cl-nav>ul>li>button{display:flex;align-items:center;gap:4px;border:0;background:none;font-weight:600;font-size:.9375rem;color:var(--ink);text-decoration:none;padding:10px 12px;border-radius:var(--radius);white-space:nowrap;position:relative}
.cl-nav>ul>li>a:hover,.cl-nav>ul>li>button:hover{background:var(--paper)}
.cl-nav>ul>li>button svg{width:16px;height:16px;transition:transform .2s var(--ease)}
.cl-nav .has-menu.open>button svg{transform:rotate(180deg)}
.cl-nav .on::after{content:"";position:absolute;left:12px;right:12px;bottom:-11px;height:3px;background:var(--ink);border-radius:2px}
.cl-menu{list-style:none;margin:0;padding:8px;position:absolute;left:0;top:calc(100% + 8px);min-width:240px;background:var(--ground);border:1px solid var(--rule-strong);border-radius:var(--radius);box-shadow:0 14px 32px -12px rgba(30,42,27,.28);display:none;z-index:40}
.has-menu.open .cl-menu{display:block;animation:popin .18s var(--ease) both}
.cl-menu a{display:block;padding:10px 12px;border-radius:4px;color:var(--ink);text-decoration:none;font-weight:500}
.cl-menu a:hover{background:var(--green-wash)}
.cl-tools{margin-left:auto;display:flex;align-items:center;gap:10px}
.cl-burger{display:none;align-items:center;gap:6px;border:1.5px solid var(--rule-strong);background:var(--ground);border-radius:var(--radius);padding:8px 12px;font-weight:650}
.cl-burger svg{width:20px;height:20px}

/* ---------- pages ---------- */
.cl-page{padding-top:32px}
.cl-page .h1{font-size:2rem}
.cl-page>.lede{margin-bottom:22px}
.cl-page>.fine{margin:6px 0 18px}
.cl-h2{font-size:1.25rem;font-weight:650;margin:34px 0 14px;letter-spacing:-.01em}
.cl-h3{font-size:1.0625rem;font-weight:650;margin:26px 0 10px}
.cl-card{background:var(--ground);border:1px solid var(--rule);border-radius:10px;padding:22px 24px}
.cl-more{margin:12px 0 0}
.cl-more a{font-weight:600;display:inline-flex;align-items:center;gap:6px}
.cl-more svg{width:16px;height:16px}
.cl-page .due{margin:18px 0 6px}
.cl-note{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;background:var(--ground);border:1px solid var(--rule);border-radius:10px;padding:14px 18px;margin:14px 0 0;font-size:1rem}
.cl-note svg{width:20px;height:20px;color:var(--ink-3);margin-top:2px}
.cl-note p{margin:0}
.cl-note a{font-weight:650}
.cl-note.ok svg{color:var(--green)}
.cl-note.warn{background:var(--orange-wash);border-color:transparent}
.cl-note.warn svg{color:var(--orange-deep)}

/* big task tiles */
.cl-tasks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.cl-tasks.two{grid-template-columns:repeat(2,minmax(0,1fr));max-width:760px}
.cl-task{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:center;background:var(--ground);border:1.5px solid var(--rule);border-radius:10px;padding:20px;text-decoration:none;color:var(--ink);transition:border-color .15s,box-shadow .15s,transform .15s var(--ease)}
.cl-task:hover{border-color:var(--green);box-shadow:0 8px 20px -14px rgba(30,42,27,.4);transform:translateY(-1px)}
.cl-task b{display:block;font-size:1.0625rem;font-weight:650}
.cl-task span span{display:block;font-size:.875rem;color:var(--ink-2);margin-top:2px}
.ct-ico{width:48px;height:48px;border-radius:12px;background:var(--green-wash);color:var(--green-ink);display:grid;place-items:center}
.ct-ico svg{width:24px;height:24px}

/* loan cards */
.cl-loans{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:16px}
.cl-loan header h3{margin:0;font-size:1.1875rem;font-weight:650}
.cl-loan header p{margin:2px 0 0;color:var(--ink-3);font-size:.875rem}
.cl-three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:18px 0}
.cl-three div{border-top:1px solid var(--rule);padding-top:10px}
.cl-three dt{font-size:.8125rem;color:var(--ink-3)}
.cl-three dd{margin:4px 0 0;font-weight:650;font-size:1.125rem;line-height:1.25;overflow-wrap:anywhere}
.cl-three.big dd{font-size:1.625rem;letter-spacing:-.015em}
.cl-three small{display:block;font-size:.8125rem;font-weight:500;color:var(--ink-3);letter-spacing:0}
.cl-three .g,.cl-t .g,.g{color:var(--green-ink)}
.cl-three .o{color:var(--orange-deep)}
.cl-loan .btn{width:100%}
.cl-loan .btn svg,.cl-card .btn svg{width:16px;height:16px}
.cl-card>.actions{margin-top:4px}

/* tables */
.cl-table-card{padding:6px 18px 10px}
.cl-t thead th{border-bottom-width:1px;color:var(--ink-3)}
.cl-t td{font-size:1rem;vertical-align:middle}
.cl-t tfoot td{padding:14px 12px;border-top:1.5px solid var(--ink)}
.cl-row{cursor:pointer}
.cl-go svg{width:18px;height:18px;color:var(--ink-3)}
.cl-t a{color:var(--ink)}

/* two columns, lists, definition lists */
.cl-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px}
.cl-list{padding:6px 20px}
.cl-li{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 0;border-bottom:1px solid var(--rule)}
.cl-li:last-child{border-bottom:0}
.cl-li .sub{display:block;font-size:.8125rem;color:var(--ink-3)}
.cl-li a{display:inline-flex;align-items:center;gap:8px;color:var(--ink);font-weight:600;text-decoration:none}
.cl-li a:hover{text-decoration:underline}
.cl-li svg{width:18px;height:18px;color:var(--ink-3)}
.cl-dl{margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:0 28px}
.cl-dl div{padding:12px 0;border-bottom:1px solid var(--rule)}
.cl-dl dt{font-size:.8125rem;color:var(--ink-3)}
.cl-dl dd{margin:3px 0 0;font-weight:600;overflow-wrap:anywhere}
.cl-dl.review{grid-template-columns:minmax(0,1fr)}
.cl-dl.review div{display:flex;justify-content:space-between;gap:16px;align-items:baseline}
.cl-dl.review dd{text-align:right;margin:0}
.cl-split{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:28px;align-items:start}
.cl-split .f select{width:100%}

/* step-by-step forms */
.cl-form-grid{display:grid;grid-template-columns:minmax(0,760px) minmax(0,1fr);gap:28px;align-items:start}
.cl-form{padding:28px 30px}
.cl-form .h1{font-size:1.75rem;margin:14px 0 6px}
.cl-form .lede{margin:6px 0 18px}
.cl-step{margin:0 0 8px;font-size:.9375rem;color:var(--ink-2)}
.cl-form .bar{height:5px}
.cl-nav-btns{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:30px;padding-top:20px;border-top:1px solid var(--rule)}
.cl-info{background:var(--ground);border:1px solid var(--rule);border-radius:10px;padding:22px 24px;font-size:1rem;position:sticky;top:96px}
.cl-info p{margin:0 0 10px}
.cl-info ul{margin:0 0 12px;padding-left:20px}
.cl-phone{font-size:1.125rem;font-weight:650}
.cl-big-total{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin:18px 0 8px;padding:16px 0 0;border-top:1.5px solid var(--ink)}
.cl-big-total span{font-weight:600}
.cl-big-total b{font-size:1.875rem;font-weight:650;letter-spacing:-.02em}
.cl-form .choice .ct{font-size:1.125rem}
.cl-form .choice .cv small{display:block;font-weight:400;font-size:.8125rem;color:var(--ink-3)}

/* empty states, drafts, legal */
.cl-empty{text-align:left;padding:34px 30px}
.cl-empty p{margin:6px 0 0;color:var(--ink-2);max-width:56ch}
.cl-empty .actions{margin-top:20px}
.cl-draft{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:12px}
.cl-draft .fine{margin:2px 0 0}
.cl-draft .dr-act{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.cl-page .upload{margin:0}
.classic .legal h2{font-size:1rem;font-weight:700;margin:18px 0 8px}
.classic .legal p{max-width:78ch;line-height:1.65}
.classic .page.narrow{max-width:calc(820px + 2*var(--gutter))}

/* the application reuses base.css; give it the classic surface */
.classic .apply-main{background:var(--ground);border:1px solid var(--rule);border-radius:10px;padding:28px 30px}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .cl-tasks{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cl-form-grid,.cl-split{grid-template-columns:minmax(0,1fr)}
  .cl-info{position:static}
}
@media (max-width:900px){
  .cl-burger{display:inline-flex}
  .cl-nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--ground);border-bottom:1px solid var(--rule);box-shadow:0 18px 30px -18px rgba(30,42,27,.35);max-height:calc(100dvh - 68px);overflow:auto}
  .cl-nav.open{display:block}
  .cl-nav>ul{flex-direction:column;align-items:stretch;padding:8px var(--gutter) 16px;gap:0}
  .cl-nav>ul>li>a,.cl-nav>ul>li>button{width:100%;justify-content:space-between;padding:14px 4px;font-size:1.0625rem;border-bottom:1px solid var(--rule);border-radius:0}
  .cl-nav .on::after{display:none}
  .cl-nav .on{color:var(--green-ink)}
  .cl-menu{position:static;box-shadow:none;border:0;padding:0 0 6px 12px;min-width:0}
  .cl-menu a{padding:12px 4px;font-size:1rem}
  .user-name{display:none}
  .proto{display:none}
}
@media (max-width:860px){
  .app{padding-bottom:0}
  .cl-two{grid-template-columns:minmax(0,1fr)}
  .cl-loans{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  html{font-size:16.5px}
  .cl-top-in{padding:10px 16px;gap:10px;min-height:60px}
  .cl-tasks,.cl-tasks.two{grid-template-columns:minmax(0,1fr)}
  .cl-card{padding:18px}
  .cl-form{padding:20px 18px}
  .cl-three{grid-template-columns:minmax(0,1fr);gap:0}
  .cl-three div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:10px 0}
  .cl-three dd{text-align:right;margin:0}
  .cl-three.big dd{font-size:1.25rem}
  .cl-table-card{padding:4px 14px}
  .cl-nav-btns{position:sticky;bottom:0;background:var(--ground);margin:24px -18px -20px;padding:12px 18px;border-radius:0 0 10px 10px}
  .cl-nav-btns .btn.primary{flex:1}
  .classic .apply-main{padding:20px 16px}
}
@media (max-width:1560px){.classic .proto{display:none}}
@media (min-width:901px) and (max-width:1240px){.classic .brand-sub{display:none}.cl-nav>ul>li>a,.cl-nav>ul>li>button{padding:10px 9px}}
@media (min-width:901px) and (max-width:1080px){.classic .user-name,.classic .proto{display:none}}
@media (max-width:480px){.classic .brand-sub{display:none}}
@media (max-width:360px){.cl-burger span{display:none}}
.cl-top-in{min-width:0}
.cl-nav{min-width:0}
/* loan cards: label / value rows at every size (numbers never break) */
.cl-loan .cl-three{grid-template-columns:minmax(0,1fr);gap:0}
.cl-loan .cl-three div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:11px 0}
.cl-loan .cl-three dd{text-align:right;margin:0;font-size:1.1875rem}
.cl-three dd{overflow-wrap:normal;white-space:nowrap}
.cl-three small{white-space:nowrap}
.cl-three.big dd{white-space:normal}
.cl-page>.h1+.cl-split{margin-top:22px}
@media (max-width:640px){.cl-li .muted{display:none}}
