/* ---------------------------------------------------------------------------
   Roshetta web client — the browser stand-in for the native apps (§5.5).

   Laid out with LOGICAL properties (inline-start / inline-end) rather than left
   and right. That is not a style preference: this sheet has to serve an Arabic
   RTL page and an English LTR page from one rule set, and every physical `left`
   here would be a second rule to keep in sync and a place for the two to drift.

   No external font, no CDN, no framework. A clinic on a slow connection loads
   one stylesheet, and nothing on this page depends on a third party being up.

   ---- The breakpoints, and why there are four --------------------------------

   The client was built for an iPhone, but a doctor reaches for a browser
   whenever the thing they normally use is unavailable — a flat phone, a
   borrowed laptop, the reception desk's machine. So the layout is not "mobile
   with a desktop afterthought"; each width gets the shape that suits it.

     base     phone portrait   one column, bottom tab bar under the thumb
     560 px   phone landscape  the two submit buttons sit side by side
     760 px   tablet           top navigation replaces the tab bar
     1000 px  laptop desktop   drug name and dosage share a line, history
                               becomes a row — so a doctor sees eight drugs at
                               once instead of scrolling past three

   The 1000 px tier is the one that matters for the borrowed-laptop case. On a
   wide screen the phone layout is not merely ugly, it is slower to work in:
   every drug costs two vertical fields and the whole prescription stops fitting
   on one screen, which is exactly when a doctor loses track of what they have
   already written.
   --------------------------------------------------------------------------- */

:root {
    --ink: #16302b;
    --muted: #5b6b67;
    --line: #d7e0dd;
    --line-strong: #b9c7c3;
    --accent: #0f766e;
    --accent-ink: #ffffff;
    --bg: #f6f8f7;
    --surface: #ffffff;
    --danger: #8f2323;
    --danger-bg: #fdf2f2;
    --danger-line: #f6c9c9;
    --ok: #14532d;
    --ok-bg: #f0fdf4;
    --ok-line: #bbf7d0;
    --radius: 12px;
    --tabbar-h: 58px;
    --page: 760px;      /* comfortable reading measure for a form */
    --page-wide: 1080px; /* history and the composer at desk width */
}

@media (prefers-color-scheme: dark) {
    :root {
        --ink: #e8efed;
        --muted: #9fb0ac;
        --line: #2c3a37;
        --line-strong: #3d4f4b;
        --accent: #2dd4bf;
        --accent-ink: #07201d;
        --bg: #101614;
        --surface: #17211f;
        --danger: #fca5a5;
        --danger-bg: #2a1414;
        --danger-line: #5b2626;
        --ok: #86efac;
        --ok-bg: #0f2318;
        --ok-line: #1f5133;
    }
}

* { box-sizing: border-box; }

html {
    /* Safari on iOS enlarges text in landscape without this, which silently
       breaks any layout that assumed the size it set. */
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    /* -apple-system first so iOS renders in San Francisco, which has the Arabic
       coverage Safari actually ships; Segoe UI covers Windows, and Noto Sans
       Arabic is the common Linux answer. */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Tahoma, "Noto Sans Arabic", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    min-height: 100dvh;
}

body.signed-in main {
    /* Room for the fixed tab bar plus the home indicator, so the last row of a
       long prescription is not sitting underneath it. */
    padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 16px);
}

.wrap {
    width: 100%;
    max-width: var(--page);
    margin-inline: auto;
    padding-inline: max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right));
}

/* Pages that are lists rather than forms get the wider measure: a long line of
   prose is tiring, a long row of columns is not. */
.wrap.wide { max-width: var(--page-wide); }

/* ---- keyboard focus ----------------------------------------------------- */

/*
   :focus-visible, not :focus. A doctor on a laptop tabbing through the drug
   rows needs to see where they are; a doctor tapping on a phone does not want a
   ring left behind on every control they touch. The browser decides which case
   it is, which it can do far better than a media query can.
*/
:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent);
    outline-offset: 2px;
}

/* ---- top bar (tablet and up) -------------------------------------------- */

.topbar {
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    padding-top: env(safe-area-inset-top);
    position: sticky;
    top: 0;
    z-index: 10;
}

.topbar > .wrap { max-width: var(--page-wide); }

.topbar-inner {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 56px;
}

.brand { font-weight: 700; font-size: 1.05rem; }

.topnav { display: none; gap: 4px; flex: 1; }

.topnav a {
    color: var(--muted);
    text-decoration: none;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: .95rem;
    font-weight: 600;
}

.topnav a.on { color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }

.logout-form { margin-inline-start: auto; }

.linkish {
    background: none;
    border: 0;
    color: var(--muted);
    font: inherit;
    font-size: .9rem;
    cursor: pointer;
    padding: 8px;
}

/* ---- bottom tab bar (phone) --------------------------------------------- */

.tabbar {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 20;
    display: flex;
    background: var(--surface);
    border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom);
}

.tabbar a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    height: var(--tabbar-h);
    text-decoration: none;
    color: var(--muted);
    font-size: .72rem;
    font-weight: 600;
}

.tabbar a.on { color: var(--accent); }
.tabbar .ico { font-size: 1.15rem; line-height: 1; }

/*
   A phone held sideways has barely 380 px of height, and a 58 px bar plus a
   sticky header would take a third of it. Shrink the bar and drop its labels
   rather than let the form disappear.
*/
@media (max-height: 460px) and (orientation: landscape) {
    :root { --tabbar-h: 44px; }
    .tabbar a span:not(.ico) { display: none; }
    .tabbar .ico { font-size: 1.3rem; }
    .topbar { position: static; }
}

/* ---- cards, headings ----------------------------------------------------- */

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 20px 18px;
    margin-block: 16px;
}

h1 { font-size: 1.3rem; margin: 20px 0 4px; }
h2 { font-size: 1.05rem; margin: 0 0 12px; }
p.sub { margin: 0 0 20px; color: var(--muted); font-size: .93rem; }

/* ---- forms --------------------------------------------------------------- */

label { display: block; font-weight: 600; margin-bottom: 6px; font-size: .92rem; }

input[type=text], input[type=email], input[type=password], input[type=date],
input[type=search], select, textarea {
    width: 100%;
    padding: 12px 14px;
    /* 16px exactly. Anything smaller and iOS Safari zooms the whole page when
       the field takes focus, then leaves it zoomed — the single most common way
       a mobile form feels broken. */
    font-size: 16px;
    font-family: inherit;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    outline: none;
}

input:focus, select:focus, textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

textarea { resize: vertical; min-height: 72px; }

.field { margin-bottom: 16px; }
.field:last-child { margin-bottom: 0; }
.hint { color: var(--muted); font-size: .82rem; margin-top: 6px; }

/* Two fields that belong together, stacked when there is no room for both. */
.row { display: grid; gap: 0 14px; grid-template-columns: 1fr; }

/*
   inline-flex rather than inline-block so an <a> styled as a button centres its
   text the way a real <button> does. Otherwise the label sits at the top of the
   48 px box and the "Clear" link looks broken next to "Search".
*/
button.primary, a.primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 14px;
    /* 44px is Apple's minimum touch target and this clears it. A doctor tapping
       "save" between patients does not get to aim carefully. */
    min-height: 48px;
    font-size: 1rem;
    font-weight: 600;
    font-family: inherit;
    text-align: center;
    text-decoration: none;
    color: var(--accent-ink);
    background: var(--accent);
    border: 0;
    border-radius: 10px;
    cursor: pointer;
}

button.secondary, a.secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 48px;
    padding: 13px;
    font: inherit;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    color: var(--accent);
    background: transparent;
    border: 1.5px solid var(--accent);
    border-radius: 10px;
    cursor: pointer;
}

button:disabled { opacity: .55; cursor: default; }

/* Hover only where a pointer exists. On a touch screen a :hover rule sticks
   after a tap and leaves a control looking permanently active. */
@media (hover: hover) {
    button.primary:hover, a.primary:hover { filter: brightness(1.08); }
    button.secondary:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
    .topnav a:hover { color: var(--ink); }
}

.actions { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }

/* ---- drug rows ----------------------------------------------------------- */

.drug {
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 14px 12px 12px;
    margin-bottom: 12px;
    background: var(--surface);
    position: relative;
}

.drug .num {
    position: absolute;
    inset-block-start: -9px;
    inset-inline-start: 12px;
    background: var(--accent);
    color: var(--accent-ink);
    font-size: .72rem;
    font-weight: 700;
    border-radius: 999px;
    padding: 1px 8px;
}

/* Name over dosage on a phone, side by side once there is room. */
.drug-fields { display: grid; gap: 0 14px; grid-template-columns: 1fr; }

.drug .remove {
    background: none;
    border: 0;
    color: var(--danger);
    font-size: .85rem;
    font-family: inherit;
    cursor: pointer;
    padding: 8px 0 0;
}

/* Autocomplete. Positioned relative to its field so it follows on either side
   of an RTL or LTR page without a second rule. */
.ac { position: relative; }

.ac-list {
    position: absolute;
    inset-inline: 0;
    top: calc(100% + 4px);
    z-index: 30;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    max-height: 260px;
    overflow-y: auto;
    /* iOS keeps momentum scrolling out of nested containers otherwise. */
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 6px 18px rgba(0,0,0,.12);
}

.ac-list:empty, .ac-list[hidden] { display: none; }

.ac-item {
    padding: 10px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--line);
}

.ac-item:last-child { border-bottom: 0; }
.ac-item.on { background: color-mix(in srgb, var(--accent) 12%, transparent); }

@media (hover: hover) {
    .ac-item:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
}

.ac-item .name { font-weight: 600; }
.ac-item .meta { color: var(--muted); font-size: .8rem; }

/*
   Bidi, which took three attempts to get right and is worth the space.

   A drug name, a patient name or a clinic ID is very often Latin — "3 FLY 600
   MG 20 TABS.", "John Smith", "12-345/A" — sitting inside an Arabic page. Left
   alone the RTL paragraph reorders it, exactly as it does in the PDF, where
   44 % of the catalogue misrenders without the FSI/PDI pair.

   What was tried, and what each attempt actually did:

     plaintext  Correct ORDER — the run's own first strong character decides its
                direction, which is what FSI means. But it also decides
                ALIGNMENT, so "John Smith" sat at the left of its column while
                every Arabic name sat at the right, and the history list looked
                ragged.

     isolate    Correct ALIGNMENT — the paragraph keeps its direction, so every
                row starts on the same side. But the run then resolves as RTL,
                and "12-345/A" rendered as "A/12-345". A clinic ID displayed
                back to front is not a cosmetic problem.

     <bdi>      Both. It is an isolate, so the surrounding RTL line places it on
                the right like everything else; and it carries dir="auto", so
                its CONTENTS order by first strong character. This is the
                element the HTML spec added for precisely this case, and it is
                what the display markup now uses.

   A <bdi> cannot wrap the value inside an <input>, so form controls keep the
   class below. plaintext is the right choice there for a different reason: a
   doctor typing a Latin drug name wants the field to behave like a Latin field,
   caret and all.
*/
input.bidi, textarea.bidi { unicode-bidi: plaintext; }

/* Stated rather than relied on: this is the browser default for <bdi>, and a
   stray `unicode-bidi: normal` in a future reset would silently undo it. */
bdi { unicode-bidi: isolate; }

/* ---- history list -------------------------------------------------------- */

.pres {
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 10px;
    background: var(--surface);
    display: grid;
    gap: 4px 16px;
    grid-template-columns: 1fr auto;
    align-items: baseline;
}

.pres .who { font-weight: 600; min-width: 0; }
.pres .when { color: var(--muted); font-size: .84rem; white-space: nowrap; }
.pres .code {
    font-family: ui-monospace, Consolas, "Courier New", monospace;
    letter-spacing: .14em;
    /* The code is always Latin uppercase; isolate it so an Arabic page cannot
       reorder it, which would put a working code in front of a patient in an
       order that does not work. */
    direction: ltr;
    unicode-bidi: isolate;
    font-size: .9rem;
}
.pres .meta { color: var(--muted); font-size: .82rem; }
.pres .open { grid-column: 1 / -1; margin-top: 8px; }

.empty { text-align: center; color: var(--muted); padding: 34px 12px; }

/* ---- the issued code ----------------------------------------------------- */

.code-big {
    font-family: ui-monospace, Consolas, "Courier New", monospace;
    font-size: clamp(1.6rem, 8vw, 2.3rem);
    letter-spacing: .22em;
    text-align: center;
    direction: ltr;
    unicode-bidi: isolate;
    padding: 16px 8px;
    border: 2px dashed var(--line-strong);
    border-radius: 10px;
    margin-block: 14px;
}

/* ---- sign-in ------------------------------------------------------------- */

/*
   On a phone the sign-in form fills the screen anyway. On a 27-inch monitor it
   would otherwise sit in the top-left corner of an ocean of background, which
   reads as a page that failed to load rather than one that is finished.
*/
@media (min-height: 600px) and (min-width: 760px) {
    body.signed-out { display: grid; place-items: center; }
    body.signed-out main { max-width: 460px; }
}

/* ===========================================================================
   560 px — a phone turned sideways, or a small window.
   =========================================================================== */

@media (min-width: 560px) {
    .actions { flex-direction: row; }
    .actions > * { flex: 1; }
    .row { grid-template-columns: 1fr 1fr; }
}

/* ===========================================================================
   760 px — tablet. The thumb is no longer the nearest thing to the screen,
   so navigation moves to the top and the bottom bar goes away.
   =========================================================================== */

@media (min-width: 760px) {
    .topnav { display: flex; }
    .tabbar { display: none; }
    body.signed-in main { padding-bottom: 40px; }

    .card { padding: 24px 22px; }
    h1 { font-size: 1.45rem; }
}

/* ===========================================================================
   1000 px — a laptop or a desk. This is the borrowed-machine case, and the
   point of it is density: more of the prescription visible at once.
   =========================================================================== */

@media (min-width: 1000px) {
    /* A little more room for the form. Not the full 1080 the history gets — a
       label and its field stop reading as a pair once they are far apart — but
       enough that a long catalogue name fits in its box. */
    :root { --page: 880px; }

    /* The whole drug row on one line: name, dosage, and the remove link beside
       them rather than on a line of its own. Three drugs go from roughly 700 px
       of screen to under 400, which is the difference between seeing a whole
       prescription and scrolling through it. */
    .drug {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: end;
        gap: 0 14px;
        padding: 18px 14px 14px;
    }
    /* The name gets the wider share because it is the longer string —
       "1 2 3 (ONE TWO THREE) 20 F.C.TABS." is a real catalogue entry, and a
       doctor must be able to read all of it to know which strength they took. */
    .drug-fields { grid-template-columns: 3fr 2fr; }
    .drug-fields .field { margin-bottom: 0; }
    .drug .remove { padding: 0 0 12px; white-space: nowrap; }

    /* One line per prescription: who, when, code, where it came from, open.
       Five columns for the five children, so nothing wraps to a second row —
       eight prescriptions fit on a screen instead of three, which is the
       difference between scanning a morning's work and scrolling through it. */
    .pres {
        grid-template-columns: minmax(0, 2fr) auto minmax(0, 1fr) minmax(0, 1.4fr) auto;
        align-items: center;
        gap: 0 20px;
        padding: 14px 16px;
    }
    .pres .open { grid-column: auto; margin-top: 0; }
    .pres .open a { width: auto; padding: 9px 16px; min-height: 0; font-size: .88rem; }

    /* The composer stays at reading width — a form is not improved by being
       wider than the eye can track — but its two-column rows get more room. */
    .actions { max-width: 560px; }
}

/* ===========================================================================
   Print. Not for prescriptions — those are the PDF, always — but a doctor who
   hits Ctrl+P on the history screen wants the list, not the navigation.
   =========================================================================== */

@media print {
    .topbar, .tabbar, .actions, form[method=get], .hint { display: none; }
    body { background: #fff; }
    .pres, .card { border-color: #999; break-inside: avoid; }
}