/* ======================================================================
 FILE     : apps/shell/static/shell/css/shell.css
 MODULE   : M06 shell
 ITEM     : 5.5
 PURPOSE  : Layout and look of the sign-in page and the signed-in frame
 VERSION  : 0.12.0
 UPDATED  : 2026-10-24
 REPLACE  : full file only, never patch
 ====================================================================== */

/* OWNS      : the look of the sign-in page and of the signed-in frame (side menu, top bar, cards)
 USES      : the variables of tokens.css; the class names used in the templates of apps/shell
 USED BY   : base.html, login.html, home.html
 HOW TO CHANGE: a colour or a size of the whole product -> tokens.css, not here
 HOW TO CHANGE: a new component (a table, a form row) -> add a new SECTION at the end, named after the component
 HOW TO CHANGE: a class name -> also change every template that uses it (grep the name in apps/)
 CHANGE LOG: 0.12.0 2026-10-24 the picker suggestions and the small dialog (.picker-results, dialog). 0.11.0 2026-10-24 short text boxes placed directly in a card form look like the other fields (.panel form > input). 0.10.0 2026-10-24 the colours of a document expiry (.state-valid, -soon, -expired, -replaced). 0.9.0 2026-10-24 drop-down lists look like the other fields (.field select), and links inside a card are gold (.panel p a). 0.7.0 2026-10-24 the second switch (branch) sits next to the first without extra left space. 0.6.0 2026-10-24 added the support banner, the help code, the button row (buttons keep their own width) and the space between stacked panels. 0.3.0 2026-10-24 added the style of the agency switch (.top-agency) and the space between the chooser buttons. 0.2.0 2026-10-24 notes added, no change to any rule. 0.1.0 2026-10-24 first version. */

/* SECTION 1 of 4 :: Base. WHAT: resets, the body font and colour, headings. CUSTOMISE: through tokens.css. ALSO CHANGE: nothing. CAUTION: low. */
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: var(--font); color: var(--text); background: var(--ivory); line-height: 1.55; -webkit-font-smoothing: antialiased; }
h1, h2 { font-family: var(--font-display); font-weight: 600; letter-spacing: .01em; margin: 0 0 calc(var(--space) * 1); }
.muted { color: var(--muted); }

/* SECTION 2 of 4 :: Buttons. WHAT: the gold button (btn-gold) and the quiet button (btn-quiet), with hover and keyboard focus. CUSTOMISE: padding and shadow here; colours in tokens.css. ALSO CHANGE: keep the focus outline: it is how keyboard users see where they are. CAUTION: medium. */
/* buttons */
.btn { font: inherit; font-weight: 600; border: 0; border-radius: var(--radius-sm); padding: 11px 20px; cursor: pointer; transition: transform .12s ease, box-shadow .12s ease, background .12s ease; }
.btn:focus-visible, .field input:focus-visible, .field select:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.btn-gold { background: linear-gradient(180deg, var(--gold), var(--gold-deep)); color: var(--ink); width: 100%; box-shadow: 0 6px 18px rgba(168, 135, 63, .35); }
.btn-gold:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(168, 135, 63, .42); }
.btn-quiet { background: transparent; color: var(--muted); border: 1px solid var(--line); padding: 7px 14px; }
.btn-quiet:hover { color: var(--text); border-color: var(--gold); }

/* SECTION 3 of 4 :: Sign-in page. WHAT: the two-part page (dark brand side, light card) and the form fields. CUSTOMISE: the brand side gradient. ALSO CHANGE: login.html uses these class names. CAUTION: low. */
/* sign-in */
body.sign { min-height: 100vh; display: grid; grid-template-columns: 1.05fr 1fr; background: var(--ink); }
.sign-art { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 8vw; color: var(--gold-soft);
  background: radial-gradient(900px 500px at 20% 10%, rgba(200, 164, 92, .18), transparent 60%), linear-gradient(160deg, var(--ink-2), var(--ink) 70%); }
.sign-mark { width: 64px; height: 64px; display: grid; place-items: center; border: 1px solid var(--gold); border-radius: 18px; font-family: var(--font-display); font-size: 34px; color: var(--gold); }
.sign-line { font-family: var(--font-display); font-size: clamp(22px, 2.6vw, 34px); max-width: 16ch; margin-top: 28px; line-height: 1.2; }
.sign-card { background: var(--ivory); display: flex; flex-direction: column; justify-content: center; padding: 8vw; }
.sign-card h1 { font-size: 36px; }
.field { display: block; margin: 18px 0; }
.field span { display: block; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.field input, .field select { width: 100%; font: inherit; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper); }
.panel p a { color: var(--gold-deep); text-underline-offset: 3px; }
.alert { background: #fbeaea; color: var(--bad); border-radius: var(--radius-sm); padding: 10px 14px; }

/* SECTION 4 of 4 :: Signed-in frame. WHAT: the side menu, top bar, content width and cards; at the end, the phone layout (one column). CUSTOMISE: the menu width (248px) and the content width (1180px). ALSO CHANGE: base.html and home.html use these class names. CAUTION: medium. */
/* signed-in frame */
body.app { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; }
.side { background: linear-gradient(180deg, var(--ink-2), var(--ink)); color: #d9dde8; display: flex; flex-direction: column; padding: 24px 16px; }
.brand { display: flex; align-items: center; gap: 12px; padding: 0 8px 24px; }
.brand-mark { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--gold); border-radius: 11px; font-family: var(--font-display); font-size: 21px; color: var(--gold); }
.brand-name { font-family: var(--font-display); font-size: 21px; letter-spacing: .14em; color: var(--gold-soft); }
.menu { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.menu-item { color: inherit; text-decoration: none; padding: 10px 14px; border-radius: var(--radius-sm); transition: background .12s ease, color .12s ease; }
.menu-item:hover { background: rgba(255, 255, 255, .06); }
.menu-item.is-on { background: rgba(200, 164, 92, .14); color: var(--gold-soft); box-shadow: inset 2px 0 0 var(--gold); }
.side-foot { font-size: 12px; color: #8b93a8; padding: 0 8px; letter-spacing: .04em; }
.main { display: flex; flex-direction: column; min-width: 0; }
.top { display: flex; justify-content: space-between; align-items: center; padding: 18px 32px; background: var(--paper); border-bottom: 1px solid var(--line); }
.top-title { font-family: var(--font-display); font-size: 22px; font-weight: 600; }
.top-user { display: flex; align-items: center; gap: 14px; margin: 0; }
.who { color: var(--muted); font-size: 14px; }
.panel form + form { margin-top: 10px; }
.top-agency { display: flex; align-items: center; gap: 8px; margin: 0 16px 0 auto; }
.support-banner { background: var(--gold-soft); color: var(--ink); padding: 10px 24px; font-size: 14px; border-bottom: 1px solid var(--line); }
.support-banner a { margin-left: 12px; font-weight: 600; color: var(--ink); }
.code { font-size: 32px; letter-spacing: 6px; font-weight: 700; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.actions .btn { width: auto; }
.panel + .panel { margin-top: 16px; }
.panel form > input[type=text] { font: inherit; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper); margin-right: 6px; }
.picker-results { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.picker-results .btn { width: auto; }
dialog { border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; max-width: 460px; width: 92%; box-shadow: var(--shadow); }
dialog::backdrop { background: rgba(14, 20, 36, .45); }
.state { font-weight: 600; text-transform: uppercase; font-size: 12px; letter-spacing: .06em; }
.state-valid { color: #2f7a4d; }
.state-soon { color: #a8741a; }
.state-expired { color: #b3342f; }
.state-replaced, .state-unknown { color: var(--muted); }
.top-agency + .top-agency { margin-left: 0; }
.top-agency select { font: inherit; padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper); color: var(--text); }
.content { padding: 32px; max-width: 1180px; width: 100%; }
.page-title { font-size: 30px; margin-bottom: 20px; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; margin-bottom: 20px; }
.card, .panel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); }
.card h2, .panel h2 { font-size: 19px; }
.card-empty { color: var(--muted); margin: 6px 0 0; }

/* NOTE: phone layout. Below 860px the page becomes one column and the menu becomes a top strip. */
@media (max-width: 860px) {
  body.sign { grid-template-columns: 1fr; }
  .sign-art { padding: 36px 28px; }
  .sign-card { padding: 36px 28px; }
  body.app { grid-template-columns: 1fr; }
  .side { flex-direction: row; align-items: center; padding: 12px 16px; }
  .menu { flex-direction: row; }
  .side-foot { display: none; }
  .content { padding: 20px; }
}