/* Rāmah Grow on the web, in the desktop app's look (src/App/Ramah.Grow.UI/Theme: RamahTokens, RamahControls and
   RamahAppStyles): the fonts, the tokens, the app's frame and the parts every page shares. The tokens are the
   desktop's, colour for colour: dark at the root (and in the sidebar, which is midnight in both themes, as the
   desktop's is), light once the app's wrapper says so. MudBlazor's palette (Theme/RamahTheme.cs) carries the same
   values for its own parts. */
@font-face { font-family: "Switzer"; src: url("../fonts/Switzer-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("../fonts/Switzer-Medium.woff2") format("woff2"); font-weight: 500 700; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("../fonts/InstrumentSerif-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("../fonts/InstrumentSerif-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

/* ── The tokens: RamahTokens.axaml's brushes, name for name (the desktop's ramah-X-brush is --X here, its
   ramah-X-shadow --X-shadow), value for value. ThemeParityTests holds every one of them to the desktop's, in dark and
   in light, and keeps colours of their own out of every other style on the web. ── */

/* Dark: deep indigo night (RamahTokens "Dark"). The sidebar keeps these in both themes. */
:root, .ramah-midnight {
  color-scheme: dark;
  --canvas: #0C0E1A;
  --sidebar: #101326;
  --surface: #161A2E;
  --sheet: #1B1F37;
  --sunken: #12152A;
  --hover: rgba(255,255,255,.078);
  --ink: #ECEEF8;
  --ink-strong: #FFFFFF;
  --muted: #9AA2C8;
  --faint: #666E98;
  --hairline: rgba(255,255,255,.122);
  --hairline-strong: rgba(255,255,255,.231);
  --accent: #7C4DFF;
  --accent-hover: #9670FF;
  --accent-soft: rgba(124,77,255,.18);
  --accent-line: rgba(124,77,255,.6);
  --on-accent: #FFFFFF;
  --accent-disabled: #262448;
  --on-accent-disabled: #7F7AAE;
  --segment-selected: #262B4D;
  --dropdown: #1B1F37;
  --display-em: #B9A2FF;
  --gold: #FFCA28;
  --gold-fill: #FFC107;
  --gold-fill-hover: #FFD54F;
  --gold-line: rgba(255,193,7,.5);
  --gold-soft: rgba(255,193,7,.149);
  --on-gold: #1A1300;
  --success: #69D27A;
  --success-soft: rgba(105,210,122,.149);
  --danger: #FF6B6B;
  --danger-line: rgba(255,107,107,.5);
  --danger-soft: rgba(255,107,107,.149);
  --overlay: rgba(6,8,18,.7);
  --selection: rgba(124,77,255,.4);
  --blue: #448AFF;
  --blue-soft: rgba(68,138,255,.18);
  --blue-ink: #82B1FF;
  --link: #82B1FF;
  --link-hover: #B3CCFF;
  --card-shadow: none;
  --panel-shadow: none;
  --lift-shadow: 0 0 0 1px rgba(124,77,255,.6), 0 28px 56px -18px rgba(0,0,0,.9);
  --sheet-shadow: 0 0 0 1px rgba(255,255,255,.141), 0 40px 80px -24px #000000;
  /* A faint film grain on the night: a 512 px swatch at 256 px, so on a Retina screen each speck is one pixel. */
  --grain: url("../grain.png");
  /* Stage colours (Material): --stage-X is the run bar, -soft and -ink the stage pill. */
  --stage-seedling: #4DD0E1; --stage-seedling-soft: rgba(77,208,225,.18); --stage-seedling-ink: #7FE3EF;
  --stage-rooting: #4DB6AC; --stage-rooting-soft: rgba(77,182,172,.18); --stage-rooting-ink: #80CBC4;
  --stage-vegetative: #66BB6A; --stage-vegetative-soft: rgba(102,187,106,.18); --stage-vegetative-ink: #8FD493;
  --stage-flowering: #9C7CF4; --stage-flowering-soft: rgba(156,124,244,.2); --stage-flowering-ink: #C2AEFF;
  --stage-drying: #FFCA28; --stage-drying-soft: rgba(255,202,40,.18); --stage-drying-ink: #FFD861;
  --stage-curing: #FF8A65; --stage-curing-soft: rgba(255,138,101,.18); --stage-curing-ink: #FFAB91;
  --stage-finished: #9AA2C8; --stage-finished-soft: #12152A; --stage-finished-ink: #9AA2C8;
}

/* Light: daylight pages beside the midnight sidebar (RamahTokens "Light"). Dimmed on purpose: a soft lavender grey
   canvas and off-white panels, never paper white. */
:root:has(.ramah-light) {
  color-scheme: light;
  --canvas: #E5E3ED;
  --sidebar: #101326;
  --surface: #F3F2F7;
  --sheet: #F6F5F9;
  --sunken: #DCD9E6;
  --hover: rgba(58,42,122,.059);
  --ink: #1A1633;
  --ink-strong: #000000;
  --muted: #5D5880;
  --faint: #9095B0;
  --hairline: rgba(58,42,122,.102);
  --hairline-strong: rgba(58,42,122,.2);
  --accent: #6236D9;
  --accent-hover: #4D22C2;
  --accent-soft: #E2DAF6;
  --accent-line: rgba(94,53,177,.6);
  --on-accent: #FFFFFF;
  --accent-disabled: #CFC6EB;
  --on-accent-disabled: #FFFFFF;
  --segment-selected: #F8F7FB;
  --dropdown: #F4F3F8;
  --display-em: #7448E8;
  --gold: #C77700;
  --gold-fill: #FFCA28;
  --gold-fill-hover: #FFC107;
  --gold-line: rgba(255,179,0,.6);
  --gold-soft: #F5EBCD;
  --on-gold: #1A1300;
  --success: #2E7D32;
  --success-soft: #DCEBDD;
  --danger: #D32F2F;
  --danger-line: #EF9A9A;
  --danger-soft: #F4DEE1;
  --overlay: rgba(22,26,46,.35);
  --selection: rgba(94,53,177,.3);
  --blue: #1E88E5;
  --blue-soft: #E3F2FD;
  --blue-ink: #1565C0;
  --link: #1565C0;
  --link-hover: #0D47A1;
  --card-shadow: 0 1px 2px 0 rgba(42,31,92,.059), 0 14px 32px -14px rgba(42,31,92,.2);
  --panel-shadow: 0 1px 2px 0 rgba(42,31,92,.051), 0 10px 28px -16px rgba(42,31,92,.18);
  --lift-shadow: 0 0 0 1px #5E35B1, 0 24px 48px -18px rgba(22,26,46,.2);
  --sheet-shadow: 0 2px 4px 0 rgba(22,26,46,.078), 0 32px 64px -20px rgba(22,26,46,.3);
  --grain: none;
  --stage-seedling: #00ACC1; --stage-seedling-soft: #E0F7FA; --stage-seedling-ink: #00838F;
  --stage-rooting: #00897B; --stage-rooting-soft: #E0F2F1; --stage-rooting-ink: #00695C;
  --stage-vegetative: #43A047; --stage-vegetative-soft: #E8F5E9; --stage-vegetative-ink: #2E7D32;
  --stage-flowering: #7E57C2; --stage-flowering-soft: #EDE7F6; --stage-flowering-ink: #5E35B1;
  --stage-drying: #FFB300; --stage-drying-soft: #FFF8E1; --stage-drying-ink: #9A6200;
  --stage-curing: #F4511E; --stage-curing-soft: #FBE9E7; --stage-curing-ink: #C63E14;
  --stage-finished: #9095B0; --stage-finished-soft: #DCD9E6; --stage-finished-ink: #5D5880;
}

/* The same in both: the environment's colours (read against their own rings and dots), the calendar page, photos,
   the photo viewer and the printed label; then type and radii. */
:root, .ramah-midnight {
  --environment-good: #66BB6A; --environment-warn: #FFB300; --environment-bad: #EF5350; --environment-band: rgba(102,187,106,.32);
  --temp: #FFB300; --humidity: #42A5F5; --vpd: #9C7CF4; --co2: #4DB6AC; --soil: #A1887F; --lux: #FFCA28; --water: #29B6F6;
  /* Equipment, by what's plugged in: a lamp, a fan, a humidifier (mist), a dehumidifier (dry), a heater, a cooler, a pump, anything else. */
  --lamp: #FFCA28; --fan: #26C6DA; --mist: #42A5F5; --dry: #7E57C2; --heat: #FF7043; --cool: #4FC3F7; --pump: #26A69A; --device: #90A4AE;
  --calendar: #F2543D; --calendar-ink: #FFFFFF;
  --tile-shadow: 0 1px 3px 0 rgba(0,0,0,.133);
  --status-ready: #4F8A57; --status-idle: #C8C2BA;
  /* Over a photo, in either theme: dark scrims under white glyphs. */
  --scrim-soft: rgba(0,0,0,.4); --scrim: rgba(0,0,0,.5); --scrim-hover: rgba(0,0,0,.6); --scrim-strong: rgba(0,0,0,.7); --on-photo: #FFFFFF;
  /* The photo viewer: a near-black stage in either theme, its words warm white, its shades (the dark end of the
     desktop's ramah-viewer-top-shade-brush and -bottom-shade-brush) fading to clear. */
  --viewer: #050406; --viewer-ink: #EDE7DC; --viewer-muted: #C9C2B8; --viewer-cover: #D8B56C;
  --viewer-arrow: rgba(5,4,6,.4); --viewer-shade: rgba(5,4,6,.7); --viewer-hover: rgba(255,255,255,.122); --viewer-hover-ink: #FFFFFF;
  /* A label is paper whatever the theme: black on white, as the desktop prints it (Services/LabelVisual). */
  --label-paper: #FFFFFF; --label-ink: #000000;

  --serif: "Instrument Serif", Georgia, serif;
  --sans: Switzer, system-ui, -apple-system, sans-serif;
  /* The desktop's SemiBold and Bold have no face of their own (Switzer comes in Regular and Medium): it emboldens the
     Medium, and so does this family, used with font-weight 700. */
  --sans-strong: "Switzer Strong", Switzer, system-ui, sans-serif;
  --mono: Menlo, Consolas, monospace;
  --radius-small: 8px;
  --radius: 10px;
  --radius-card: 14px;
  --radius-sheet: 18px;
  --ease: cubic-bezier(.2,.7,.2,1);
}
@font-face { font-family: "Switzer Strong"; src: url("../fonts/Switzer-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }

html, body { margin: 0; min-height: 100%; background: var(--canvas); }
body { -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; font: 400 13.5px/1.5 var(--sans); color: var(--ink); }
a { color: inherit; }
em, .ramah-em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--display-em); }
::selection { background: var(--selection); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Starting: the mark and a quiet bar, before and while Blazor starts (on the night, as the desktop's splash). */
.ramah-starting { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; background: var(--grain) 0 0 / 256px 256px, var(--canvas); }
.ramah-starting img { width: 72px; height: 72px; }
.ramah-starting-line { width: 160px; height: 4px; border-radius: 2px; background: var(--accent-soft); overflow: hidden; }
.ramah-starting-line i { display: block; width: 40%; height: 100%; background: var(--accent); animation: ramah-slide 1.1s ease-in-out infinite; }
.ramah-starting-bar { width: 160px; }
@keyframes ramah-slide { from { transform: translateX(-100%); } to { transform: translateX(250%); } }

.ramah-error-ui { display: none; position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); padding: 11px 16px; border-radius: var(--radius); background: var(--danger); color: var(--canvas); font: 13px var(--sans); z-index: 2000; }
.ramah-error-ui a { color: inherit; font-weight: 600; }

/* ── Type: the desktop's scale. Serif for display and headings, sans for everything you read or touch. ── */
.ramah-eyebrow { font: 500 10.5px/1.3 var(--sans); letter-spacing: .21em; text-transform: uppercase; color: var(--gold); margin: 0 0 8px; }
.ramah-label { font: 500 10.5px/1.3 var(--sans); letter-spacing: .15em; text-transform: uppercase; color: var(--muted); }
.ramah-rule { display: flex; gap: 12px; align-items: center; margin: 0 0 10px; }
.ramah-rule::after { content: ""; flex: 1; height: 1px; background: var(--hairline); }
.ramah-title { font: 400 38px/1.1 var(--serif); letter-spacing: -.01em; margin: 0; color: var(--ink-strong); }
.ramah-heading { font: 400 24px/1.15 var(--serif); margin: 0; color: var(--ink-strong); }
.ramah-subhead { font: 500 14px/1.3 var(--sans); margin: 0; color: var(--ink); }
.ramah-sub { font-size: 12.5px; color: var(--muted); }
.ramah-lede { font-size: 14px; line-height: 22px; color: var(--muted); }
.ramah-caption { font-size: 12.5px; color: var(--muted); }
.ramah-faint { color: var(--faint); }
.ramah-code { font: 11.5px/1.3 var(--mono); letter-spacing: .09em; color: var(--muted); }
.ramah-lineage { font: italic 400 17px/1.2 var(--serif); color: var(--display-em); }
.ramah-card-title { font: 400 20px/1.2 var(--serif); color: var(--ink-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* A section's heading as the desktop rules it: a small icon, the title in capitals, a hairline, a note at the end. */
.ramah-section-label { display: flex; align-items: center; gap: 0; min-height: 20px; margin: 0 0 10px; }
.ramah-section-label .mud-icon-root { flex: none; width: 14px; height: 14px; margin-right: 7px; color: var(--muted); }
.ramah-section-label > b { font: 600 10.5px/1.2 var(--sans); letter-spacing: .15em; text-transform: uppercase; color: var(--ink); white-space: nowrap; }
.ramah-section-label::after { content: ""; flex: 1; height: 1px; margin: 0 12px; background: var(--hairline); }
.ramah-section-label > span { order: 2; font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ramah-section-label > a { order: 2; }

/* ── Buttons, as the desktop draws them: rounded rectangles at its radius. A quiet outline (ramah-pill, the
   desktop's ramah-ghost), the violet fill for the one thing to do (ramah-pill-solid, its ramah-primary), and links
   in the blue link colour. MudBlazor's buttons follow the same rules. ── */
.ramah-pill { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 0 16px; box-sizing: border-box; border-radius: var(--radius); font: 400 13px/1 var(--sans); border: 1px solid var(--hairline-strong); color: var(--ink); background: transparent; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background .15s, border-color .15s, color .15s; }
.ramah-pill:hover { background: var(--hover); border-color: var(--hairline-strong); color: var(--ink-strong); }
.ramah-pill:active { background: var(--accent-soft); }
.ramah-pill .mud-icon-root { font-size: 18px; width: 18px; height: 18px; }
.ramah-pill-solid { background: var(--accent); color: var(--on-accent); border-color: transparent; font-weight: 500; }
.ramah-pill-solid:hover, .ramah-pill-solid:active { background: var(--accent-hover); border-color: transparent; color: var(--on-accent); }
.ramah-pill[disabled], .ramah-pill:disabled { background: transparent; color: var(--faint); border-color: var(--hairline); pointer-events: none; }
.ramah-pill-solid[disabled], .ramah-pill-solid:disabled { background: var(--accent-disabled); color: var(--on-accent-disabled); border-color: transparent; }
.ramah-pill-small { min-height: 28px; padding: 0 11px; font-size: 12px; }
.ramah-pill-danger { background: transparent; color: var(--danger); border-color: var(--danger-line); }
.ramah-pill-danger:hover { background: var(--danger-soft); color: var(--danger); border-color: var(--danger-line); }
.ramah-link { color: var(--link); text-decoration: none; cursor: pointer; background: none; border: 0; font: inherit; padding: 0; }
.ramah-link:hover { color: var(--link-hover); }
.ramah-link-danger, .ramah-link-danger:hover { color: var(--danger); }
.ramah-link[disabled] { opacity: .5; pointer-events: none; }

.mud-button-root.mud-button { border-radius: var(--radius); min-height: 36px; padding: 0 16px; box-shadow: none !important; font: 400 13px/1 var(--sans); letter-spacing: 0; text-transform: none; }
.mud-button-root.mud-button.mud-button-size-small { min-height: 28px; padding: 0 11px; font-size: 12px; }
.mud-button-root.mud-button.mud-button-size-large { min-height: 42px; padding: 0 22px; font-size: 14px; }
.mud-button-filled.mud-button-filled-primary { background: var(--accent); color: var(--on-accent); font-weight: 500; }
.mud-button-filled.mud-button-filled-primary:hover { background: var(--accent-hover); }
.mud-button-filled.mud-button-filled-primary.mud-button-disabled, .mud-button-filled.mud-button-disabled { background: var(--accent-disabled) !important; color: var(--on-accent-disabled) !important; }
.mud-button-outlined { border: 1px solid var(--hairline-strong) !important; color: var(--ink) !important; background: transparent; }
.mud-button-outlined:hover { background: var(--hover) !important; color: var(--ink-strong) !important; }
.mud-button-text { padding: 0 6px !important; min-height: 30px !important; }
.mud-button-text.mud-button-text-primary, .mud-button-text.mud-button-text-tertiary, .mud-button-text.mud-button-text-default { color: var(--link); }
.mud-button-text:hover { background: transparent !important; color: var(--link-hover); }
.mud-button-text.mud-button-disabled { color: var(--faint) !important; }
.mud-button-text.mud-button-text-error { color: var(--danger); }
.mud-icon-button { border-radius: 999px; color: var(--muted); }
.mud-icon-button:hover { background: var(--hover); color: var(--ink); }
.mud-ripple-ripple, .mud-ripple::after { display: none !important; }

/* ── Fields: on the surface (a shade of their own in light), a strong hairline, violet when pointed at and typed in. ── */
.mud-input.mud-input-outlined { background: var(--surface); border-radius: var(--radius); font-size: 13.5px; color: var(--ink); transition: background .15s; }
.mud-input.mud-input-outlined:hover { background: var(--surface); }
.mud-input.mud-input-outlined:focus-within { background: var(--surface); }
.mud-input.mud-input-outlined .mud-input-outlined-border { border-radius: var(--radius); border-color: var(--hairline-strong); border-width: 1px; transition: border-color .15s; }
.mud-input.mud-input-outlined:hover .mud-input-outlined-border { border-color: var(--accent-line); }
.mud-input.mud-input-outlined.mud-focused .mud-input-outlined-border, .mud-input.mud-input-outlined:focus-within .mud-input-outlined-border { border-color: var(--accent) !important; border-width: 1px !important; }
.mud-input.mud-input-outlined.mud-input-error .mud-input-outlined-border { border-color: var(--danger) !important; }
.mud-input > input.mud-input-root-outlined, .mud-input > textarea.mud-input-root-outlined, div.mud-input-slot.mud-input-root-outlined { font-size: 13.5px; color: var(--ink); }
.mud-input > input.mud-input-root-outlined.mud-input-root-margin-dense, div.mud-input-slot.mud-input-root-outlined.mud-input-root-margin-dense { padding-top: 9px; padding-bottom: 9px; }
.mud-input > input.mud-input-root-outlined, div.mud-input-slot.mud-input-root-outlined { padding-left: 12px; padding-right: 12px; }
.mud-input input::placeholder, .mud-input textarea::placeholder { color: var(--faint); opacity: 1; }
.mud-input-adornment .mud-icon-root, .mud-input-adornment-icon { color: var(--muted); }
.mud-input-label { color: var(--muted) !important; }
.mud-focused .mud-input-label { color: var(--accent) !important; }
.mud-input-helper-text { color: var(--muted); font-size: 12px; }
.mud-input-helper-text.mud-input-error { color: var(--danger); }
.mud-input-control > .mud-input-control-input-container > .mud-input-label-outlined { background: transparent; }
.mud-select .mud-select-input { cursor: pointer; }
/* Our own fields (sign-in, the sidebar's search): the same box. */
.ramah-input { width: 100%; box-sizing: border-box; min-height: 38px; padding: 9px 12px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--hairline-strong); color: var(--ink); font: 400 13.5px/1.3 var(--sans); outline: 0; -webkit-appearance: none; appearance: none; transition: border-color .15s, background .15s; }
.ramah-input:hover { border-color: var(--accent-line); background: var(--surface); }
.ramah-input:focus { border-color: var(--accent); background: var(--surface); color: var(--ink-strong); }
.ramah-input::placeholder { color: var(--faint); }

/* ── Choices: a segmented switch (sunken, the chosen part raised), switches and checks in the accent, tabs. ── */
.ramah-segments.mud-toggle-group { display: inline-grid; border: 0 !important; border-radius: var(--radius) !important; padding: 3px; gap: 0; background: var(--sunken); }
.ramah-segments .mud-toggle-item, .ramah-segments .mud-toggle-item.mud-button-root.mud-button { border: 0 !important; border-radius: var(--radius-small) !important; min-height: 30px; padding: 0 14px; color: var(--muted) !important; background: transparent !important; font: 400 12.5px/1 var(--sans); }
.ramah-segments .mud-toggle-item.mud-button-root.mud-button:hover { background: var(--hover) !important; color: var(--ink) !important; }
.ramah-segments .mud-toggle-item.mud-button-root.mud-button.mud-toggle-item-selected { background: var(--segment-selected) !important; color: var(--ink-strong) !important; }
.ramah-segments .mud-toggle-item .mud-icon-root { width: 17px; height: 17px; }
/* Breeding's two modes (Find parents, Predict a cross): the page's width under its title, taller and in ink. */
.bz-modes.mud-toggle-group { display: grid; grid-template-columns: 1fr 1fr; width: 100%; margin: 0 0 20px; padding: 4px; }
.bz-modes .mud-toggle-item, .bz-modes .mud-toggle-item.mud-button-root.mud-button { min-height: 44px; gap: 8px; font: 500 14.5px/1 var(--sans); color: var(--ink) !important; }
.bz-modes .mud-toggle-item .mud-icon-root { width: 19px; height: 19px; }
.mud-switch .mud-switch-base.mud-checked + .mud-switch-track, .mud-switch-track.mud-primary { opacity: 1; }
.mud-switch .mud-switch-track { opacity: 1; background-color: var(--hairline-strong); }
.mud-switch .mud-switch-base.mud-checked + .mud-switch-track { background-color: var(--accent) !important; }
.mud-switch .mud-switch-base.mud-checked .mud-switch-thumb-medium, .mud-switch .mud-switch-base.mud-checked .mud-switch-thumb { background-color: var(--on-accent); }
.mud-switch-label { font-size: 13.5px; color: var(--ink); }
.mud-checkbox .mud-icon-root { color: var(--hairline-strong); }
.mud-checkbox .mud-checked .mud-icon-root, .mud-checkbox.mud-checked .mud-icon-root { color: var(--accent); }
.mud-tabs-toolbar, .mud-tabs-tabbar { background: transparent !important; }
.mud-tab { min-height: 36px; padding: 0 24px 0 0; font: 400 15px/1 var(--sans); text-transform: none; color: var(--muted); }
.mud-tab:hover { background: transparent; color: var(--ink); }
.mud-tab.mud-tab-active { color: var(--ink-strong); }
.mud-tab-slider { background: var(--gold-fill) !important; }

/* ── Chips, badges and tags. A chip: a hairline round with quiet text ("by Rāmah"). A badge: gold in a gold ring
   ("MOTHER", "IN-HOUSE"). A tag, as the desktop's tag chips: a sunken round in ink, a rule's tag in the accent with
   its spark, a written one with its ×. ── */
.ramah-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.ramah-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 22px; box-sizing: border-box; border: 1px solid var(--hairline-strong); border-radius: 999px; padding: 2px 10px; font: 400 11.5px/1.3 var(--sans); color: var(--muted); background: transparent; text-decoration: none; white-space: nowrap; }
.ramah-chip-on { color: var(--ink); }
button.ramah-chip { cursor: pointer; }
button.ramah-chip:hover, a.ramah-chip:hover { background: var(--hover); color: var(--ink); }
.ramah-badge { display: inline-flex; align-items: center; gap: 5px; min-height: 20px; box-sizing: border-box; padding: 2px 9px; border-radius: 999px; font: 500 9.5px/1.3 var(--sans); letter-spacing: .19em; text-transform: uppercase; background: var(--canvas); border: 1px solid var(--gold-line); color: var(--gold); white-space: nowrap; }
.ramah-badge .mud-icon-root { width: 12px; height: 12px; margin-left: -2px; }
.ramah-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ramah-tag { display: inline-flex; align-items: center; gap: 4px; min-height: 28px; box-sizing: border-box; padding: 4px 10px; border-radius: 999px; border: 0; font: 400 12.5px/1.3 var(--sans); color: var(--ink); background: var(--sunken); white-space: nowrap; text-decoration: none; }
.ramah-tag .mud-icon-root { width: 12px; height: 12px; }
.ramah-tag-auto { background: var(--accent-soft); color: var(--accent); padding-left: 8px; }
.ramah-tag-auto .mud-icon-root { color: var(--accent); }
.ramah-tag-small { min-height: 22px; padding: 2px 8px; font-size: 11.5px; }
.ramah-tag-small.ramah-tag-auto { padding-left: 6px; }
button.ramah-tag { cursor: pointer; font-family: var(--sans); }
button.ramah-tag:hover { background: var(--hover); }
.ramah-tag-x { display: inline-grid; place-items: center; width: 17px; height: 17px; margin-right: -4px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--muted); cursor: pointer; }
.ramah-tag-x:hover { background: var(--hover); color: var(--ink); }
.ramah-tag-x .mud-icon-root { width: 11px; height: 11px; font-size: 11px; }
/* A soft pill in the accent (the desktop's Border.ramah-pill): "Your own line", a stage, a status. */
.ramah-soft-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 22px; box-sizing: border-box; padding: 3px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font: 500 11.5px/1.3 var(--sans); white-space: nowrap; }
.ramah-soft-pill .mud-icon-root { width: 14px; height: 14px; color: inherit; }
.ramah-soft-pill-gold { background: var(--gold-soft); color: var(--gold); }
.ramah-soft-pill-success { background: var(--success-soft); color: var(--success); }
.ramah-soft-pill-danger { background: var(--danger-soft); color: var(--danger); }
.ramah-soft-pill-quiet { background: var(--sunken); color: var(--muted); }
.ramah-origin { font-size: 10.5px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; padding: 4px 12px 4px 10px; }

/* ── Menus and lists that drop down: on the sheet, a strong hairline, the desktop's radius. ── */
.mud-popover.mud-paper { background: var(--dropdown); border: 1px solid var(--hairline-strong); border-radius: var(--radius); box-shadow: var(--sheet-shadow); color: var(--ink); }
.mud-popover .mud-list { padding: 4px; }
.mud-list-item, .mud-menu-item { border-radius: 6px; min-height: 32px; padding: 6px 10px; font-size: 13px; color: var(--ink); }
.mud-list-item:hover, .mud-menu-item:hover, .mud-list-item-clickable:hover { background: var(--hover) !important; }
.mud-list-item .mud-icon-root, .mud-menu-item .mud-icon-root { color: var(--muted); }
.mud-selected-item, .mud-list-item.mud-selected-item { background: var(--accent-soft) !important; color: var(--ink-strong) !important; }
.mud-menu-item.mud-disabled, .mud-list-item.mud-list-item-disabled { color: var(--faint); }
.mud-divider { border-color: var(--hairline) !important; }
.mud-tooltip { background: var(--sheet) !important; color: var(--ink) !important; border: 1px solid var(--hairline-strong); border-radius: var(--radius-small) !important; font: 12.5px/1.4 var(--sans) !important; box-shadow: var(--sheet-shadow); }

/* ── Dialogs: the desktop's sheet. Snackbars: its toasts (ink, the accent for done, red for a problem). ── */
.mud-overlay .mud-overlay-dark, .mud-overlay-dark { background-color: var(--overlay) !important; }
.mud-dialog { background: var(--sheet) !important; color: var(--ink); border-radius: var(--radius-sheet) !important; box-shadow: var(--sheet-shadow) !important; }
.mud-dialog .mud-dialog-title { padding: 24px 24px 6px; }
.mud-dialog .mud-dialog-title, .mud-dialog .mud-dialog-title .mud-typography, .mud-dialog .mud-dialog-title h6 { font: 400 24px/1.15 var(--serif); letter-spacing: 0; color: var(--ink-strong); }
.mud-dialog .mud-dialog-content { padding: 6px 24px 8px; color: var(--ink); }
.mud-dialog .mud-dialog-actions { padding: 14px 24px 22px; gap: 8px; }
.mud-message-box .mud-dialog-content { color: var(--muted); line-height: 1.5; }
.mud-message-box .mud-dialog-actions .mud-button-root { border: 1px solid var(--hairline-strong); color: var(--ink); background: transparent; padding: 0 16px !important; min-height: 36px !important; }
.mud-message-box .mud-dialog-actions .mud-button-root:hover { background: var(--hover) !important; color: var(--ink-strong); }
.mud-message-box .mud-dialog-actions .mud-button-root:last-child { background: var(--accent); color: var(--on-accent); border-color: transparent; font-weight: 500; }
.mud-message-box .mud-dialog-actions .mud-button-root:last-child:hover { background: var(--accent-hover) !important; color: var(--on-accent); }
.mud-snackbar-location-bottom-left, .mud-snackbar-location-bottom-center, .mud-snackbar-location-bottom-right { bottom: 28px; }
.mud-snackbar { border-radius: var(--radius) !important; padding: 11px 16px !important; min-height: 0 !important; max-width: 560px; font: 13px/1.45 var(--sans) !important; box-shadow: var(--sheet-shadow) !important; background: var(--ink) !important; color: var(--canvas) !important; }
.mud-snackbar .mud-snackbar-icon, .mud-snackbar .mud-icon-root { color: inherit !important; }
.mud-snackbar.mud-alert-filled-success, .mud-snackbar.mud-alert-filled-info { background: var(--accent) !important; color: var(--on-accent) !important; }
.mud-snackbar.mud-alert-filled-error, .mud-snackbar.mud-alert-filled-warning { background: var(--danger) !important; color: var(--canvas) !important; }
.mud-snackbar .mud-snackbar-content-action .mud-button-root { color: inherit; }
.mud-alert { border-radius: 12px !important; }
.mud-paper { background-color: var(--surface); color: var(--ink); }
.mud-paper-outlined { border-color: var(--hairline) !important; }
.mud-chip { border-radius: 999px; }
.mud-progress-linear { border-radius: 2px; height: 4px !important; }
.mud-progress-linear.mud-progress-linear-color-primary { background-color: var(--accent-soft) !important; }
.mud-progress-linear .mud-progress-linear-bar { background-color: var(--accent) !important; }
.mud-skeleton { background-color: var(--hover); border-radius: var(--radius-small); }
.mud-picker .mud-picker-calendar-header, .mud-picker-toolbar { background: var(--accent) !important; }

/* ── The app: the desktop's shell. The midnight sidebar at the left (240 px), the page under its breadcrumbs; a
   narrow window folds the sidebar to a rail of icons, a phone swaps it for a tab bar along the bottom. ── */
.ramah-shell { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; background: var(--grain) 0 0 / 256px 256px, var(--canvas); }
.ramah-sidebar { position: sticky; top: 0; height: 100vh; height: 100dvh; box-sizing: border-box; display: flex; flex-direction: column; padding: 30px 18px 20px; background: var(--grain) 0 0 / 256px 256px, var(--sidebar); border-right: 1px solid var(--hairline); color: var(--ink); overflow-y: auto; scrollbar-width: none; }
.ramah-s-logo { display: block; margin: 0 0 26px; line-height: 0; }
.ramah-s-wordmark { height: 50px; width: auto; }
.ramah-s-mark { display: none; width: 44px; height: 44px; margin: 0 auto; }
.ramah-s-search { margin: 0 0 18px; }
.ramah-s-search input { width: 100%; box-sizing: border-box; height: 37px; padding: 0 12px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--hairline-strong); color: var(--ink); font: 400 12.5px var(--sans); outline: 0; -webkit-appearance: none; appearance: none; transition: border-color .15s; }
.ramah-s-search input:hover { border-color: var(--accent-line); }
.ramah-s-search input:focus { border-color: var(--accent); color: var(--ink-strong); }
.ramah-s-search input::placeholder { color: var(--faint); }
.ramah-s-search input::-webkit-search-cancel-button { filter: grayscale(1) opacity(.6); }
.ramah-s-nav { display: flex; flex-direction: column; gap: 4px; }
.ramah-s-item { display: flex; align-items: center; gap: 12px; min-height: 37px; box-sizing: border-box; padding: 0 12px; border-radius: var(--radius); font: 500 14px/1 var(--sans); color: var(--ink); text-decoration: none; transition: background .15s, color .15s; }
.ramah-s-item .ramah-s-icon { flex: none; width: 18px; height: 18px; color: var(--muted); }
.ramah-s-item:hover { background: var(--hover); color: var(--ink-strong); }
.ramah-s-item:hover .ramah-s-icon { color: var(--ink); }
.ramah-s-item.active, .ramah-s-item.active:hover { background: var(--accent-soft); color: var(--ink-strong); }
.ramah-s-item.active .ramah-s-icon { color: var(--accent); }
.ramah-s-foot { margin-top: auto; padding-top: 18px; display: flex; flex-direction: column; gap: 10px; margin-left: 4px; }
.ramah-s-nfc { display: flex; align-items: flex-start; gap: 9px; padding: 10px 12px; border-radius: var(--radius-card); background: var(--surface); border: 1px solid var(--hairline); font-size: 12px; line-height: 1.4; color: var(--muted); }
.ramah-status-dot { flex: none; display: inline-block; width: 8px; height: 8px; margin-top: 4px; border-radius: 50%; background: var(--status-idle); }
.ramah-status-dot.ramah-ready { background: var(--status-ready); }
.ramah-account-menu { display: block; width: 100%; }
.ramah-s-account { display: flex; align-items: center; gap: 9px; width: 100%; box-sizing: border-box; padding: 8px 10px; border-radius: var(--radius); border: 1px solid var(--hairline-strong); background: transparent; color: var(--ink); text-align: left; cursor: pointer; font-family: var(--sans); text-decoration: none; transition: background .15s; }
.ramah-s-account:hover { background: var(--hover); }
.ramah-s-account-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ramah-s-account-text b { font-weight: 500; font-size: 12.5px; line-height: 1.3; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ramah-s-account-text span { font-size: 10.5px; line-height: 1.3; color: var(--muted); }
.ramah-avatar { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); font: 600 11px/1 var(--sans); }
.ramah-version { font-size: 10.5px; color: var(--muted); opacity: .7; margin: 0 0 2px 10px; }
.ramah-main { min-width: 0; display: flex; flex-direction: column; }
.ramah-topline { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 22px; padding: 18px 40px 0; }
.ramah-crumbs { display: flex; flex-wrap: wrap; align-items: center; min-height: 22px; min-width: 0; font-size: 12.5px; }
.ramah-crumb { color: var(--muted); text-decoration: none; padding: 2px 0; }
.ramah-crumb:hover { color: var(--link-hover); }
.ramah-crumb-chevron { display: inline-flex; margin: 0 5px; color: var(--muted); opacity: .7; }
.ramah-crumb-chevron .mud-icon-root { width: 15px; height: 15px; }
.ramah-crumb-middle { color: var(--muted); padding: 2px 0; }
.ramah-crumb-here { font-weight: 500; color: var(--ink); max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ramah-avatar-menu { display: none; }
.ramah-avatar-button { display: grid; place-items: center; padding: 4px; margin: -4px -4px -4px 12px; border: 0; background: transparent; border-radius: 50%; cursor: pointer; text-decoration: none; }
.ramah-avatar-button .ramah-avatar { width: 30px; height: 30px; font-size: 13px; }
.ramah-page { width: 100%; max-width: 1400px; box-sizing: border-box; padding: 22px 40px 48px; }
.ramah-tabbar { display: none; }
/* The rail: below 1000 px the sidebar is its icons, the mark, NFC's dot and the avatar. */
@media (max-width: 999.98px) {
  .ramah-shell { grid-template-columns: 76px minmax(0, 1fr); }
  .ramah-sidebar { padding: 30px 10px 20px; align-items: stretch; }
  .ramah-sidebar .ramah-s-text, .ramah-s-search, .ramah-s-wordmark { display: none; }
  .ramah-s-mark { display: block; }
  .ramah-s-logo { margin-bottom: 24px; }
  .ramah-s-item { justify-content: center; padding: 0; min-height: 40px; }
  .ramah-s-foot { margin-left: 0; align-items: stretch; }
  .ramah-s-nfc { justify-content: center; align-items: center; padding: 9px 0; border-radius: 999px; }
  .ramah-s-nfc .ramah-status-dot { margin-top: 0; }
  .ramah-s-account { justify-content: center; padding: 8px 0; }
  .ramah-topline { padding: 18px 24px 0; }
  .ramah-page { padding: 22px 24px 40px; }
}
/* A phone: no sidebar; the sections along the bottom, and who's signed in at the top right. */
@media (max-width: 599.98px) {
  .ramah-shell { grid-template-columns: minmax(0, 1fr); padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
  .ramah-sidebar { display: none; }
  .ramah-topline { padding: calc(14px + env(safe-area-inset-top)) 20px 0; min-height: 36px; }
  .ramah-avatar-menu { display: block; }
  .ramah-page { padding: 18px 20px 32px; }
  .ramah-tabbar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; padding: 6px 6px calc(10px + env(safe-area-inset-bottom)); background: var(--sidebar); border-top: 1px solid var(--hairline); }
  .ramah-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 50px; border-radius: 12px; color: var(--muted); text-decoration: none; font: 400 11px/1.2 var(--sans); min-width: 0; }
  .ramah-tab span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
  .ramah-tab .ramah-tab-icon { width: 22px; height: 22px; color: var(--muted); }
  .ramah-tab.active { background: var(--accent-soft); }
  .ramah-tab.active span { color: var(--ink-strong); }
  .ramah-tab.active .ramah-tab-icon { color: var(--ink-strong); }
}

/* ── A page's head: the title and the line under it; what it can do at the right, level with the line. ── */
.ramah-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin: 10px 0 22px; flex-wrap: wrap; }
.ramah-page-head > div:first-child { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ramah-page-head .ramah-eyebrow { margin: 0 0 6px; }
.ramah-page-head .ramah-sub { margin-top: 0; display: flex; flex-wrap: wrap; gap: 0 10px; }
.ramah-page-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ramah-section { margin-top: 26px; }
.ramah-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 4px; }
.ramah-section-head > .ramah-link { font-size: 13px; }
.ramah-section-head + .ramah-sub { margin-bottom: 14px; }
.ramah-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 22px; }
.ramah-toolbar-end { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.ramah-search { flex: 1 1 320px; max-width: 520px; }
.ramah-search .mud-input-control { margin: 0; }
.ramah-picker-small { flex: 0 0 150px; }
.ramah-picker-small .mud-input-control { margin: 0; }
/* One search box at a time, as on the desktop: the sidebar's while it's open, the page's own once it folds away. */
@media (min-width: 1000px) { .ramah-page-search { display: none; } }
.ramah-empty { padding: 64px 24px 80px; text-align: center; color: var(--muted); font-size: 12.5px; }
.ramah-empty .ramah-heading { margin-bottom: 8px; }
.ramah-empty-action { margin-top: 18px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ── Cards: the surface, a hairline, the desktop's card radius (and its soft shadow in light). ── */
.ramah-card { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-card); box-shadow: var(--card-shadow); padding: 18px 20px; position: relative; box-sizing: border-box; }
.ramah-card-link { text-decoration: none; color: inherit; transition: border-color .15s, transform .16s var(--ease); display: block; }
.ramah-card-link:hover { border-color: var(--accent-line); }
.ramah-panel { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-card); box-shadow: var(--panel-shadow); padding: 18px 20px; box-sizing: border-box; }

/* Today's four numbers: a tile each (the desktop's ramah-tile: the surface, a hairline, no shadow), its icon in a tinted circle. */
.ramah-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 14px; }
.ramah-stat { box-shadow: none; padding: 16px 18px 16px 20px; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto auto; column-gap: 10px; }
.ramah-stat.ramah-card-link:hover { transform: translateY(-2px); }
.ramah-stat .ramah-label { display: block; grid-column: 1; grid-row: 1; padding: 7px 0 0 2px; }
.ramah-stat-n { grid-column: 1; grid-row: 2; font: 400 44px/1.1 var(--serif); margin: 6px 0 5px; color: var(--ink-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ramah-stat p { grid-column: 1 / -1; grid-row: 3; margin: 0; font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ramah-stat-ic { grid-column: 2; grid-row: 1 / span 2; align-self: start; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; }
.ramah-stat-ic .mud-icon-root { width: 20px; height: 20px; }
.ramah-tint-veg { background: var(--stage-vegetative-soft); color: var(--stage-vegetative-ink); }
.ramah-tint-flower { background: var(--stage-flowering-soft); color: var(--stage-flowering-ink); }
.ramah-tint-gold { background: var(--gold-soft); color: var(--gold); }
.ramah-tint-blue { background: var(--blue-soft); color: var(--blue-ink); }
/* A phone: two to a row, the icon beside the label and the number across the tile. */
@media (max-width: 599.98px) {
  .ramah-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .ramah-stat { padding: 14px 14px 14px 16px; }
  .ramah-stat .ramah-label { align-self: center; padding-top: 0; }
  .ramah-stat-n { grid-column: 1 / -1; font-size: 38px; }
  .ramah-stat-ic { grid-row: 1; width: 34px; height: 34px; }
  .ramah-stat-ic .mud-icon-root { width: 18px; height: 18px; }
}

/* Environments: the cards, side by side (each card's own parts are in its scoped files). */
.ramah-zones { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 16px; }

/* Stages: each a colour (the run bar), a soft fill and an ink for its pill, dark or light. */
.ramah-stage-seedling, .ramah-stage-germination { --stage: var(--stage-seedling); --stage-soft: var(--stage-seedling-soft); --stage-ink: var(--stage-seedling-ink); }
.ramah-stage-rooting, .ramah-stage-clone { --stage: var(--stage-rooting); --stage-soft: var(--stage-rooting-soft); --stage-ink: var(--stage-rooting-ink); }
.ramah-stage-vegetative { --stage: var(--stage-vegetative); --stage-soft: var(--stage-vegetative-soft); --stage-ink: var(--stage-vegetative-ink); }
.ramah-stage-flowering { --stage: var(--stage-flowering); --stage-soft: var(--stage-flowering-soft); --stage-ink: var(--stage-flowering-ink); }
.ramah-stage-drying { --stage: var(--stage-drying); --stage-soft: var(--stage-drying-soft); --stage-ink: var(--stage-drying-ink); }
.ramah-stage-curing { --stage: var(--stage-curing); --stage-soft: var(--stage-curing-soft); --stage-ink: var(--stage-curing-ink); }
.ramah-stage-finished { --stage: var(--stage-finished); --stage-soft: var(--stage-finished-soft); --stage-ink: var(--stage-finished-ink); }
/* A plant that died or was culled: its pill in the danger tint, as the desktop's. */
.ramah-stage-pill.ramah-stage-ended { --stage-soft: var(--danger-soft); --stage-ink: var(--danger); }
.ramah-stage-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 22px; box-sizing: border-box; padding: 3px 10px; border-radius: 999px; font: 500 11.5px/1.3 var(--sans); background: var(--stage-soft); color: var(--stage-ink); white-space: nowrap; }
.ramah-stage-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--stage); flex: none; display: inline-block; }

/* A plant's run as one thin bar (the desktop's compact cycle bar): a part per stage on the sunken track, sized by its
   days; done parts solid, the current one filled to today, those ahead a 28% tint, days past the plan in red. */
.ramah-run-bar { display: flex; gap: 2px; height: 5px; border-radius: 2.5px; overflow: hidden; background: var(--sunken); }
.ramah-run-bar > span { position: relative; display: flex; min-width: 4px; overflow: hidden; background: color-mix(in srgb, var(--stage) 28%, transparent); }
.ramah-run-bar > span > i { display: block; height: 100%; background: var(--stage); }
.ramah-run-bar > span > b { display: block; height: 100%; background: var(--danger); }
.ramah-run-bar > span.ramah-run-done { background: var(--stage); }

/* Tiles: plants and cultivars as cards with their photo, as many to a row as fit at 246 px. */
.ramah-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 246px), 1fr)); gap: 18px; }
.ramah-plant-card { display: flex; flex-direction: column; border-radius: var(--radius-card); overflow: hidden; background: var(--surface); border: 1px solid var(--hairline); box-shadow: var(--card-shadow); text-decoration: none; color: inherit; transition: border-color .15s; }
.ramah-plant-card:hover { border-color: var(--accent-line); }
.ramah-plant-card-photo { height: 166px; }
.ramah-plant-card-body { display: flex; flex-direction: column; gap: 3px; padding: 12px 15px 14px; min-width: 0; }
.ramah-plant-card-sub { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ramah-plant-card-facts { display: flex; align-items: center; justify-content: flex-start; gap: 10px; margin-top: 9px; min-width: 0; }
.ramah-plant-card-where { font-size: 11.5px; line-height: 1.3; color: var(--muted); text-align: left; min-width: 0; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.ramah-plant-card-tags { display: flex; gap: 4px; flex-wrap: nowrap; overflow: hidden; margin-top: 9px; mask-image: linear-gradient(90deg, var(--ink-strong) 85%, transparent); } /* a mask reads only opacity */
.ramah-plant-card .ramah-run-bar { margin-top: 11px; }
.ramah-plant-card-cover { position: relative; }
.ramah-plant-card-cover > .ramah-badge { position: absolute; left: 10px; top: 10px; }
@media (max-width: 599.98px) {
  .ramah-tiles { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
  .ramah-plant-card-photo { height: 120px; }
}

/* A photo or its stand-in, as the desktop's cover: the initials (55%) on its tint, a plant's its stage's (red once it
   has died or been culled), a line's its own. */
.ramah-photo { position: relative; overflow: hidden; background: var(--stage-soft, var(--accent-soft)); display: flex; align-items: center; justify-content: center; }
.ramah-photo.ramah-stage-ended { --stage-soft: var(--danger-soft); --stage-ink: var(--danger); }
.ramah-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ramah-initials { font: 400 46px/1 var(--serif); color: var(--stage-ink, var(--accent)); opacity: .55; }

/* Tables: the desktop's plant table. Quiet column heads over rows that light up when pointed at. */
.ramah-table.mud-table { background: transparent !important; border: 0; border-radius: 0 !important; box-shadow: none !important; }
.ramah-table .mud-table-container { overflow-x: auto; }
.ramah-table .mud-table-head .mud-table-cell { font: 500 11px/1.2 var(--sans); letter-spacing: 0; text-transform: none; color: var(--muted); border-bottom: 1px solid var(--hairline) !important; padding: 4px 14px 8px; }
.ramah-table .mud-table-head .mud-table-cell .mud-button-root { font: inherit; color: inherit; }
.ramah-table .mud-table-sort-label:hover, .ramah-table .mud-table-sort-label.mud-direction-asc, .ramah-table .mud-table-sort-label.mud-direction-desc { color: var(--ink-strong); }
.ramah-table .mud-table-body .mud-table-cell { border-bottom: 0 !important; padding: 9px 14px; font-size: 13px; color: var(--ink); }
.ramah-table .mud-table-body .mud-table-row td:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.ramah-table .mud-table-body .mud-table-row td:last-child { border-radius: 0 var(--radius) var(--radius) 0; }
.ramah-table.mud-table-hover .mud-table-container .mud-table-root .mud-table-body .mud-table-row:hover { background: var(--hover) !important; }
.ramah-table-tags { flex-wrap: nowrap; }
.ramah-row-link { cursor: pointer; }
.ramah-row-name { font-weight: 500; }

/* The new plant's form, as the desktop's sheet: on the sheet colour, its radius, its shadow. */
.ramah-record { background: var(--sheet); border-radius: var(--radius-sheet); box-shadow: var(--sheet-shadow); }

/* Two columns that become one on a phone. */
.ramah-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.ramah-split-even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) { .ramah-split, .ramah-split-even { grid-template-columns: 1fr; } }

/* The stage mix: one bar split by stage, and its legend. */
.ramah-mix { display: flex; height: 8px; border-radius: 4px; overflow: hidden; gap: 2px; background: transparent; margin: 6px 0 12px; }
.ramah-mix i { background: var(--stage); border-radius: 4px; min-width: 6px; }
.ramah-mix-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--muted); }
.ramah-mix-legend span { display: inline-flex; align-items: center; gap: 7px; }
.ramah-mix-legend b { color: var(--ink); font-weight: 500; }
.ramah-zones-sub { margin: 2px 0 14px; }
.ramah-rule .ramah-faint { order: 2; letter-spacing: 0; text-transform: none; font-size: 11.5px; color: var(--muted); }
.ramah-rule.ramah-label::after { order: 1; }

/* The plant page and the new plant (Pages/PlantPage, Pages/NewPlantPage, Components/Plant): what their sheets and forms share. */
.ramah-field-label { display: block; margin: 16px 0 6px 2px; }
.ramah-save { font: italic 400 14px/1.2 var(--serif); color: var(--muted); white-space: nowrap; }
.ramah-save-failed { color: var(--danger); }
.ramah-menu-danger, .ramah-menu-danger .mud-icon-root { color: var(--danger) !important; }
.ramah-sheet .mud-dialog-content { padding-bottom: 4px; }
.ramah-sheet-lede { margin: 0 0 6px; font-size: 14px; line-height: 22px; color: var(--muted); }
.ramah-sheet-choices { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.ramah-sheet-aside { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--hairline); font-size: 12.5px; color: var(--muted); }
.ramah-sheet-reading { margin-top: 14px; white-space: pre-wrap; font-size: 14px; line-height: 1.6; color: var(--ink); }

/* ---- The theme's wrapper (App.razor) names dark or light (the tokens above follow it); it adds no box. ---- */
.ramah-dark, .ramah-light { display: contents; }

/* ── Settings (Pages/SettingsPage, Components/*Settings, Components/Settings), as the desktop's Settings
   (RamahAppStyles "Settings"): MudBlazor's own parts in its look. Each group a heading (13 semibold, ink-strong), its
   lines on one MudPaper card (the surface, a hairline round it, the field radius, no shadow) as a MudList with
   hairlines between the items, and a sentence under it (12/17, muted). A line is 44 tall at least, 16 in from either
   side: its name at the left in ink-strong, its value muted at the right (green good news, red trouble), or its
   control; a line you press reads in the link colour (red when it removes something) and takes the hover tint. ── */
.ramah-settings-group { display: flex; flex-direction: column; gap: 7px; margin-bottom: 26px; }
.ramah-settings-group .ramah-settings-header { margin: 0 0 0 4px; font: 600 13px/1.3 var(--sans); letter-spacing: 0; color: var(--ink-strong); }
.ramah-settings-group .ramah-settings-footer { display: block; margin: 0 4px; font: 400 12px/17px var(--sans); letter-spacing: 0; color: var(--muted); }
.mud-paper.ramah-settings-card { background: var(--surface); border: 1px solid var(--hairline) !important; border-radius: var(--radius); box-shadow: none; overflow: hidden; }
.ramah-settings-card .mud-list.ramah-settings-lines { padding: 0; overflow: visible; }
.ramah-settings-lines > .mud-list-item { min-height: 44px; padding: 10px 16px; box-sizing: border-box; color: var(--ink); font: 400 13.5px/1.35 var(--sans); }
.ramah-settings-lines > .mud-list-item + .mud-list-item { border-top: 1px solid var(--hairline); }
.ramah-settings-lines > .mud-list-item > .mud-list-item-text { margin: 0; min-width: 0; }
.ramah-settings-lines .mud-typography { font-family: var(--sans); letter-spacing: 0; }
.ramah-setting-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-width: 0; }
.ramah-setting-name { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: none; max-width: 60%; }
.ramah-settings-lines .ramah-setting-title { font-size: 13.5px; line-height: 1.35; color: var(--ink-strong); }
.ramah-settings-lines .ramah-setting-detail { font-size: 11.5px; line-height: 1.35; color: var(--muted); }
.ramah-settings-lines .ramah-setting-value { font-size: 13.5px; line-height: 1.35; color: var(--muted); text-align: right; min-width: 0; overflow-wrap: anywhere; }
.ramah-settings-lines .ramah-setting-value.ramah-setting-good { color: var(--success); }
.ramah-settings-lines .ramah-setting-value.ramah-setting-problem { color: var(--danger); }
.ramah-setting-end { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex: 1 1 auto; min-width: 0; }
.ramah-setting-end .mud-input-control { margin: 0; }
.ramah-setting-end > .mud-select { flex: 0 1 240px; min-width: 150px; }
.ramah-setting-end > .mud-select:has(.ramah-setting-fact) { flex: 1 1 auto; }
.ramah-setting-end > .ramah-setting-value { flex: 1 1 auto; }
/* A line you press: no chrome, the link colour, the hover tint across it (MudBlazor's clickable list item). */
.ramah-settings-lines > .mud-list-item.ramah-setting-action { cursor: pointer; color: var(--link); background: transparent; transition: background .15s, color .15s; }
.ramah-settings-lines > .mud-list-item.ramah-setting-action .mud-typography { font-size: 13.5px; line-height: 1.35; color: inherit; }
.ramah-settings-lines > .mud-list-item.ramah-setting-action:hover, .ramah-settings-lines > .mud-list-item.ramah-setting-action:focus-visible { background: var(--hover); color: var(--link-hover); }
.ramah-settings-lines > .mud-list-item.ramah-setting-action.ramah-destructive, .ramah-settings-lines > .mud-list-item.ramah-setting-action.ramah-destructive:hover { color: var(--danger); }
.ramah-settings-lines > .mud-list-item.ramah-setting-action.mud-list-item-disabled { color: var(--faint) !important; }
/* One provider for now: its menu reads as a quiet fact on the sunken, not a greyed-out control (the desktop's
   ComboBox.ramah-setting-menu:disabled). */
.ramah-setting-fact .mud-input.mud-input-outlined.mud-disabled { background: var(--sunken); color: var(--ink); }
.ramah-setting-fact .mud-input.mud-input-outlined.mud-disabled .mud-input-outlined-border { border-color: transparent; }
.ramah-setting-fact .mud-input.mud-disabled .mud-input-slot, .ramah-setting-fact .mud-input.mud-disabled input { color: var(--ink) !important; -webkit-text-fill-color: var(--ink); }
.ramah-setting-fact .mud-input.mud-disabled .mud-input-adornment .mud-icon-root { color: var(--muted); }
/* Naming something where it will show: the box and Add (the desktop's SettingAddView); an environment renamed in place. */
.ramah-setting-add-form, .ramah-controller-naming { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; }
.ramah-setting-add-form > .mud-input-control, .ramah-controller-naming > .mud-input-control { flex: 1; min-width: 0; margin: 0; }
.ramah-settings-lines > .mud-list-item.ramah-setting-add { padding: 8px 10px 8px 16px; }
.ramah-settings-lines > .mud-list-item.ramah-environment { padding-top: 6px; padding-bottom: 6px; }
.ramah-environment .ramah-environment-name { flex: 1 1 auto; min-width: 0; margin-left: -12px; }
.ramah-environment .ramah-setting-end > .ramah-setting-value { flex: none; }
.ramah-environment .ramah-environment-delete { color: var(--faint); }
.ramah-environment .ramah-environment-delete:hover { color: var(--danger); }
.ramah-settings-lines > .mud-list-item.ramah-controller .ramah-setting-end { flex: 1 1 280px; }
.ramah-settings-lines > .mud-list-item.ramah-controller .ramah-setting-end > .mud-select { flex: 1 1 280px; max-width: none; }
/* A guide: a few plain sentences, each beside its icon on a soft round tile (MudBlazor's avatar; the desktop's
   SettingGuideView); a form: signing in, right here. */
.ramah-settings-lines > .mud-list-item.ramah-setting-guide, .ramah-settings-lines > .mud-list-item.ramah-setting-form { padding: 14px 16px; }
.mud-avatar.ramah-guide-icon { width: 28px; height: 28px; flex: none; background: var(--accent-soft); color: var(--accent); }
.mud-avatar.ramah-guide-icon .mud-icon-root { width: 15px; height: 15px; font-size: 15px; color: var(--accent); }
.ramah-guide-step .ramah-guide-text { align-self: center; font-size: 13px; line-height: 19px; color: var(--ink); }
.ramah-connect-form { display: block; margin-top: 14px; }
@media (max-width: 760px) { .ramah-settings-wide { display: none; } }
@media (max-width: 520px) {
  .ramah-settings-lines > .mud-list-item.ramah-controller .ramah-setting-row { flex-wrap: wrap; gap: 8px 16px; }
  .ramah-settings-lines > .mud-list-item.ramah-controller .ramah-setting-end { flex: 1 1 100%; }
  .ramah-environment .ramah-environment-plants { display: none; }
}

/* A notice that matters before you act (where a password goes), as the desktop's SecureNoticeView: MudBlazor's alert
   on the gold's soft fill in a gold ring, the shield in gold, a serif line, quiet type under it. */
.mud-alert.ramah-promise { padding: 14px 16px; border-radius: 12px; border: 1px solid var(--gold-line); background: var(--gold-soft); color: var(--ink); }
.mud-alert.ramah-promise .mud-alert-icon { margin-right: 12px; padding: 1px 0 0; color: var(--gold); }
.mud-alert.ramah-promise .mud-alert-icon .mud-icon-root { width: 22px; height: 22px; font-size: 22px; }
.mud-alert.ramah-promise .mud-alert-message { padding: 0; }
.mud-alert.ramah-promise .ramah-promise-title { font: 400 16px/1.2 var(--serif); margin-bottom: 2px; color: var(--ink); }
.mud-alert.ramah-promise .ramah-promise-text { font-size: 12.5px; line-height: 18px; margin-top: 2px; color: var(--muted); }
.ramah-problem { margin-top: 12px; }
.ramah-inline-icon { vertical-align: -4px; margin-right: 2px; }
/* A name that's edited where it's shown: no box until it's pointed at or typed in. */
.ramah-inline-edit .mud-input.mud-input-outlined { background: transparent; }
.ramah-inline-edit .mud-input.mud-input-outlined .mud-input-outlined-border { border-color: transparent; }
.ramah-inline-edit .mud-input.mud-input-outlined:hover .mud-input-outlined-border { border-color: var(--hairline-strong); }
.ramah-inline-edit .mud-input-slot { font-weight: 400; }
/* A name that saves as it's typed (a tent's): it reads as text until pointed at, and underlines in gold while typed in. */
.ramah-inline-input { display: block; width: 100%; box-sizing: border-box; margin: 0; padding: 7px 12px; background: transparent; border: 1px solid transparent; border-radius: 8px;
  outline: 0; font: 400 16px/1.4 var(--sans); color: var(--ink); transition: border-color .15s, background .15s; }
.ramah-inline-input:hover { border-color: var(--hairline-strong); }
.ramah-inline-input:focus { border-color: var(--gold-fill); background: var(--surface); }
.ramah-inline-problem { margin: 4px 12px 0; font-size: 12.5px; color: var(--danger); }

/* A menu's heading, and an entry the rules will refuse (choosing it says why). */
.mud-menu-item.ramah-menu-head { opacity: 1 !important; }
.mud-menu-item.ramah-menu-head .mud-menu-item-text { font: 500 10.5px/1 var(--sans); letter-spacing: .15em; text-transform: uppercase; color: var(--muted); }
.mud-menu-item.ramah-menu-faint .mud-menu-item-text { opacity: .45; }

/* ── Sign in and create account, as the desktop's: one column, as wide as a form reads well, a little above the
   middle; the wordmark, the two tabs sharing the width, the heading, the fields and the one violet button. ── */
.ramah-auth { min-height: 100vh; min-height: 100dvh; display: flex; align-items: flex-start; justify-content: center; padding: max(56px, 10vh) 26px 40px; box-sizing: border-box; background: var(--grain) 0 0 / 256px 256px, var(--canvas); }
.ramah-auth-card { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 16px; animation: ramah-fade-in .22s ease-out; }
@keyframes ramah-fade-in { from { opacity: 0; } to { opacity: 1; } }
.ramah-auth-logo { height: 60px; width: auto; align-self: flex-start; margin: 0 0 8px; }
.ramah-auth-tabs { display: grid; grid-template-columns: 1fr 1fr; padding: 3px; margin: 0 0 8px; border-radius: var(--radius); background: var(--sunken); }
.ramah-auth-tab { min-height: 30px; padding: 0 14px; border-radius: var(--radius-small); border: 0; background: transparent; color: var(--ink); font: 500 12.5px/1 var(--sans); cursor: pointer; transition: background .15s, color .15s; }
.ramah-auth-tab:hover { background: var(--hover); color: var(--ink-strong); }
.ramah-auth-tab[aria-selected="true"] { background: var(--segment-selected); color: var(--ink-strong); }
.ramah-auth .ramah-title { margin: 0; }
.ramah-auth-lede { margin: 0 0 4px; }
.ramah-auth-form { width: 100%; display: flex; flex-direction: column; gap: 16px; }
.ramah-field { display: flex; flex-direction: column; gap: 6px; }
.ramah-field label { font: 500 10.5px/1.2 var(--sans); letter-spacing: .15em; text-transform: uppercase; color: var(--muted); padding-left: 2px; }
.ramah-field input { width: 100%; box-sizing: border-box; height: 38px; padding: 0 12px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--hairline-strong); color: var(--ink); font: 400 13.5px var(--sans); outline: 0; -webkit-appearance: none; appearance: none; transition: border-color .15s, background .15s; }
.ramah-field input:hover { border-color: var(--accent-line); background: var(--surface); }
.ramah-field input:focus { border-color: var(--accent); background: var(--surface); color: var(--ink-strong); }
.ramah-field input::placeholder { color: var(--faint); }
.ramah-field small { color: var(--muted); font-size: 12px; padding-left: 2px; }
.ramah-auth-submit { min-height: 36px; margin-top: 4px; border: 0; border-radius: var(--radius); background: var(--accent); color: var(--on-accent); font: 500 13px/1 var(--sans); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 10px; transition: background .15s; }
.ramah-auth-submit:hover { background: var(--accent-hover); }
.ramah-auth-submit:disabled { background: var(--accent-disabled); color: var(--on-accent-disabled); cursor: default; }
/* Passkeys: the other way in, quieter than the form's own button; "or" between the two. */
.ramah-auth-passkey { min-height: 40px; border: 1px solid var(--hairline-strong); border-radius: var(--radius); background: transparent; color: var(--ink-strong); font: 500 13px/1 var(--sans); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 10px; transition: background .15s; }
.ramah-auth-passkey:hover { background: var(--accent-soft); }
.ramah-auth-passkey:disabled { color: var(--muted); cursor: default; }
.ramah-auth-or { display: flex; align-items: center; gap: 12px; margin: 4px 0; font-size: 12px; color: var(--muted); }
.ramah-auth-or::before, .ramah-auth-or::after { content: ""; flex: 1; border-top: 1px solid var(--hairline); }
.ramah-auth-problem { color: var(--danger); font-size: 12.5px; padding: 0 2px; }
.ramah-auth-fine { margin: 18px 0 0; font-size: 12.5px; color: var(--muted); text-align: center; }
.ramah-auth-consent { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.ramah-auth-legal { margin: 0; font-size: 12.5px; color: var(--muted); text-align: center; }
.ramah-auth-consent a, .ramah-auth-legal a { color: var(--link); text-decoration: none; }
.ramah-auth-consent a:hover, .ramah-auth-legal a:hover { color: var(--link-hover); }
.ramah-auth-wait { width: 160px; margin: 12px auto 0; }
.ramah-spinner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: ramah-spin .8s linear infinite; }
@keyframes ramah-spin { to { transform: rotate(360deg); } }
@media (max-width: 599.98px) { .ramah-auth { padding-top: 48px; } .ramah-auth-logo { height: 48px; } }

/* The wordmark for the page's own ground: white words on the night, ink in daylight (the sidebar's is always night). */
.ramah-logo-light { display: none; }
:root:has(.ramah-light) .ramah-logo-dark { display: none; }
:root:has(.ramah-light) .ramah-logo-light { display: block; }

/* ── Setup, the first run, as the desktop's: one column, the wordmark and the stepper over it, groups of lines like
   Settings, Back at the left and the next step in violet at the right. ── */
.ramah-setup-page { min-height: 100vh; min-height: 100dvh; background: var(--grain) 0 0 / 256px 256px, var(--canvas); }
.ramah-setup { position: relative; max-width: 688px; margin: 0 auto; padding: 48px 24px 72px; box-sizing: border-box; }
.ramah-setup-head { display: flex; align-items: center; justify-content: space-between; gap: 18px 24px; margin-bottom: 44px; flex-wrap: wrap; }
.ramah-setup-logo { height: 40px; width: auto; }
.ramah-setup .ramah-title { margin: 0; }
.ramah-setup-lede { margin: 10px 0 28px; max-width: 560px; }
.ramah-setup .ramah-settings-group { margin-bottom: 26px; }
.ramah-setup .ramah-settings-group:last-of-type { margin-bottom: 0; }
.ramah-setup-actions { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 28px; }
.ramah-setup-actions > :last-child { margin-left: auto; }
.ramah-setup-actions .ramah-link { font-size: 13px; padding: 2px 0; }
.ramah-line-name { color: var(--ink-strong); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The stepper: the steps numbered in a row, joined by a line; done ones ticked in the accent, the one you're on filled,
   those ahead quiet. */
.ramah-steps { display: flex; align-items: center; gap: 10px; margin: 0; padding: 0; list-style: none; min-width: 0; }
.ramah-steps > li { display: flex; align-items: center; }
.ramah-step { display: flex; align-items: center; gap: 8px; font: 500 12.5px/1.2 var(--sans); color: var(--muted); white-space: nowrap; }
.ramah-step-n { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; box-sizing: border-box; border: 1px solid var(--hairline-strong); font: 600 11.5px/1 var(--sans); color: var(--muted); transition: background .15s, color .15s, border-color .15s; }
.ramah-step-n .mud-icon-root { width: 14px; height: 14px; }
.ramah-step-line { width: 36px; height: 1px; background: var(--hairline-strong); flex: none; }
.ramah-step-line.ramah-step-passed { background: var(--accent); }
.ramah-step-now { color: var(--ink-strong); }
.ramah-step-now .ramah-step-n { background: var(--accent); border-color: transparent; color: var(--on-accent); }
.ramah-step-done { color: var(--ink); }
.ramah-step-done .ramah-step-n { background: var(--accent-soft); border-color: transparent; color: var(--accent); }
button.ramah-step { border: 0; background: transparent; padding: 0; cursor: pointer; }
button.ramah-step:hover { color: var(--link-hover); }
button.ramah-step:hover .ramah-step-n { border-color: var(--accent-line); }
@media (max-width: 599.98px) {
  .ramah-setup { padding: 28px 20px 48px; }
  .ramah-setup-head { margin-bottom: 30px; }
  .ramah-setup-logo { height: 34px; }
  .ramah-steps { width: 100%; }
  .ramah-step-line { flex: 1; width: auto; min-width: 18px; }
}

/* Our own small parts that the pages share. */
.ramah-glyph { width: 17px; height: 17px; }
.ramah-glyph-small { width: 14px; height: 14px; }

/* Cultivars (cultivars, cultivars/{id}, library/{id}): a menu item that deletes, in red (menus open outside a page's own styles). */
.mud-menu-item.ramah-danger, .mud-menu-item.ramah-danger .mud-icon-root { color: var(--danger); }

/* ---- Tag colours (TagTones): each aroma and effect word always wears the same colour, on every device (the desktop's
   are ramah-tone-* in RamahTokens.axaml, held to these by ThemeParityTests). Effects by how they feel, aromas by their
   family: --tone is the legend's dot, --tone-soft (16%) a chip's fill, --tone-line (38%) a quick pick's ring and
   --tone-ink the word. ---- */
[class*="ramah-tone-"] { --tone-soft: color-mix(in srgb, var(--tone) 16%, transparent); --tone-line: color-mix(in srgb, var(--tone) 38%, transparent); }
.ramah-tone-energized { --tone: #FF6B6B; --tone-ink: #FF9E9E; }
.ramah-tone-relaxed { --tone: #448AFF; --tone-ink: #8DB6FF; }
.ramah-tone-sleepy { --tone: #7986CB; --tone-ink: #AAB4EE; }
.ramah-tone-aroused { --tone: #F06292; --tone-ink: #F8A8C6; }
.ramah-tone-happy { --tone: #FFCA28; --tone-ink: #FFDB6E; }
.ramah-tone-heady { --tone: #9C7CF4; --tone-ink: #C2AEFF; }
.ramah-tone-focused { --tone: #26C6DA; --tone-ink: #7FE3EF; }
.ramah-tone-hungry { --tone: #66BB6A; --tone-ink: #9AD69D; }
.ramah-tone-character { --tone: #90A4AE; --tone-ink: #C3CFD5; }
.ramah-tone-caution { --tone: #FF8A65; --tone-ink: #FFB49B; }
.ramah-tone-citrus { --tone: #FFD54F; --tone-ink: #FFE38A; }
.ramah-tone-fruity { --tone: #E05AD6; --tone-ink: #F29BEC; }
.ramah-tone-sweet { --tone: #F48FB1; --tone-ink: #F9BCD1; }
.ramah-tone-floral { --tone: #B39DDB; --tone-ink: #D3C5EE; }
.ramah-tone-herbal { --tone: #4DB6AC; --tone-ink: #8FD6CE; }
.ramah-tone-woody { --tone: #7CB342; --tone-ink: #AED581; }
.ramah-tone-earthy { --tone: #A1887F; --tone-ink: #CDB9B1; }
.ramah-tone-gas { --tone: #78909C; --tone-ink: #B4C3CB; }
.ramah-tone-spicy { --tone: #FF7043; --tone-ink: #FFA88B; }
.ramah-tone-savory { --tone: #C0CA33; --tone-ink: #DCE775; }
.ramah-tone-toasted { --tone: #D4A373; --tone-ink: #E8C6A2; }
.ramah-light .ramah-tone-energized { --tone-ink: #C62828; }
.ramah-light .ramah-tone-relaxed { --tone-ink: #1565C0; }
.ramah-light .ramah-tone-sleepy { --tone-ink: #3949AB; }
.ramah-light .ramah-tone-aroused { --tone-ink: #C2185B; }
.ramah-light .ramah-tone-happy { --tone: #F9A825; --tone-ink: #8D6E00; }
.ramah-light .ramah-tone-heady { --tone-ink: #5E35B1; }
.ramah-light .ramah-tone-focused { --tone: #00ACC1; --tone-ink: #00838F; }
.ramah-light .ramah-tone-hungry { --tone-ink: #2E7D32; }
.ramah-light .ramah-tone-character { --tone-ink: #546E7A; }
.ramah-light .ramah-tone-caution { --tone-ink: #D84315; }
.ramah-light .ramah-tone-citrus { --tone: #FBC02D; --tone-ink: #8A6A00; }
.ramah-light .ramah-tone-fruity { --tone-ink: #9C27B0; }
.ramah-light .ramah-tone-sweet { --tone-ink: #C2185B; }
.ramah-light .ramah-tone-floral { --tone-ink: #6A4FB0; }
.ramah-light .ramah-tone-herbal { --tone-ink: #00796B; }
.ramah-light .ramah-tone-woody { --tone-ink: #558B2F; }
.ramah-light .ramah-tone-earthy { --tone-ink: #6D4C41; }
.ramah-light .ramah-tone-gas { --tone-ink: #455A64; }
.ramah-light .ramah-tone-spicy { --tone-ink: #D84315; }
.ramah-light .ramah-tone-savory { --tone: #9E9D24; --tone-ink: #6B6A13; }
.ramah-light .ramah-tone-toasted { --tone: #B07D4F; --tone-ink: #7A5230; }
.ramah-tag[class*="ramah-tone-"]:not(.ramah-tone-plain) { background: var(--tone-soft); color: var(--tone-ink); }

/* The desktop's panel (ramah-panel): a tab's body, the log, on the surface with a hairline round it. */
.vis-panel { display: flex; flex-direction: column; gap: 12px; min-width: 0; box-sizing: border-box; padding: 18px 20px; border-radius: 14px;
             background: var(--surface); border: 1px solid var(--hairline); box-shadow: var(--panel-shadow); }

/* ── Labels (Components/LabelSheet, js/labels.js; Today, a plant's Actions, an environment's ⋯, Plants). The label is
   the desktop's: Inter (its label face, from Avalonia.Fonts.Inter, OFL), black on white whatever the theme. The app
   prints only labels: every page is one 2 × 1 in label, edge to edge, and nothing else of the app is on paper
   (⌘P elsewhere does nothing: js/keys.js). ── */
@font-face { font-family: "Inter"; src: url("../fonts/Inter-Medium.woff2") format("woff2"); font-weight: 500; font-display: block; }
@font-face { font-family: "Inter"; src: url("../fonts/Inter-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: block; }
@font-face { font-family: "Inter"; src: url("../fonts/Inter-Bold.woff2") format("woff2"); font-weight: 700; font-display: block; }
.ramah-printed-probe { position: absolute; left: -10000px; top: 0; visibility: hidden; overflow: hidden; font-family: Inter, var(--sans); overflow-wrap: normal; word-break: normal; }
@page { size: 2in 1in; margin: 0; }
@media print {
  html, body { margin: 0 !important; padding: 0 !important; min-height: 0 !important; height: auto !important; background: none !important; }
  body > :not(#app), #app > :not(div), #app > div > :not(.ramah-labels) { display: none !important; }
  #app, #app > div { display: block !important; margin: 0 !important; padding: 0 !important; min-height: 0 !important; height: auto !important; background: none !important; }
}

/* ---- Breeding (Pages/BreedingPage, Components/Breeding): the phone's tab bar holds a tab for every section, Breeding
   the sixth, however many there are. ---- */
@media (max-width: 599.98px) {
  .ramah-tabbar { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .ramah-tab { padding: 0 1px; }
}

/* ── Accounts (Pages/SignInPage, ForgotPasswordPage, ConfirmEmailPage, ResetPasswordPage; Components/HumanCheck):
   the human check's box in the card's flow, a quiet link under a form, and a done page's way back in. ── */
.ramah-human-check { width: 100%; }
.ramah-auth-aside { align-self: center; font-size: 13px; padding: 2px 0; }
.ramah-auth-go { text-decoration: none; margin-top: 8px; }

/* The admin's pages (Overview, Accounts, AI): its tabs under the title, its figures in a row, its panels in pairs,
   its tables quiet and numbers right-aligned. */
.ramah-admin-tabs { display: flex; gap: 4px; margin: -8px 0 22px; border-bottom: 1px solid var(--hairline); }
.ramah-admin-tabs a { padding: 10px 14px; margin-bottom: -1px; font: 400 13.5px/1 var(--sans); color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent; }
.ramah-admin-tabs a:hover { color: var(--ink-strong); }
.ramah-admin-tabs a.on { color: var(--ink-strong); border-bottom-color: var(--accent); }
.ramah-admin-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 18px; }
.ramah-admin-stat { display: flex; flex-direction: column; gap: 6px; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-card); padding: 16px 18px; box-shadow: var(--panel-shadow); }
.ramah-admin-stat .figure { font: 400 32px/1.05 var(--serif); color: var(--ink-strong); }
.ramah-admin-stat.problem .figure { color: var(--danger); }
.ramah-admin-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.ramah-admin-panel { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }
.ramah-admin-pair > .ramah-admin-panel { margin-bottom: 0; }
.ramah-admin-panel p { margin: 0; }
.ramah-admin-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ramah-admin-note, .ramah-admin-said { margin: -6px 0 14px; }
.ramah-admin-table.mud-table, .ramah-admin-table .mud-table-container { background: transparent; }
.ramah-admin-table th { font: 500 10.5px/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.ramah-admin-table td, .ramah-admin-table th { border-color: var(--hairline) !important; }
.ramah-admin-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.ramah-admin-table tr.failed td { color: var(--muted); }
.ramah-admin-grid.mud-table { padding: 4px 6px; }
.ramah-admin-grid .mud-table-container { background: transparent; }
.ramah-admin-grid td, .ramah-admin-grid th { border-color: var(--hairline) !important; }
.ramah-admin-click { cursor: pointer; }
.ramah-admin-email { color: var(--ink-strong); margin-right: 8px; }
.ramah-admin-good { color: var(--success); }
.ramah-admin-muted { color: var(--muted); }
.ramah-admin-ai { display: flex; flex-direction: column; gap: 4px; min-width: 130px; }
.ramah-admin-bar.mud-progress-linear { background: var(--sunken); }
.ramah-admin-bar .mud-progress-linear-bar { background: var(--accent) !important; }
.ramah-admin-bar.full .mud-progress-linear-bar { background: var(--danger) !important; }
.ramah-admin-search { min-width: 260px; height: 36px; box-sizing: border-box; padding: 0 12px; border-radius: var(--radius); border: 1px solid var(--hairline-strong); background: var(--surface); color: var(--ink); font: 400 13.5px/1 var(--sans); }
.ramah-admin-search:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.ramah-admin-actions { align-items: flex-start; }
.ramah-admin-paging { display: flex; gap: 8px; justify-content: flex-end; }
.ramah-admin-chart .mud-chart { width: 100%; }
.ramah-admin-chart path.mud-chart-bar { fill: var(--accent) !important; stroke: var(--accent) !important; }
.ramah-admin-chart .mud-charts-xaxis text, .ramah-admin-chart .mud-charts-yaxis text { fill: var(--muted) !important; font: 400 11px var(--sans); }
.ramah-admin-chart .mud-charts-gridlines-yaxis path, .ramah-admin-chart .mud-charts-gridlines-xaxis-lines path { stroke: var(--hairline) !important; }
.ramah-admin-chart .mud-chart-legend { display: none; }
@media (max-width: 820px) {
  .ramah-admin-pair { grid-template-columns: minmax(0, 1fr); }
  .ramah-admin-search { min-width: 0; width: 100%; }
}