/* NetFoundry MCP Connect. Design tokens from ezziti's style.css. */

:root {
    /* Both schemes are declared here, and light-dark() picks one from the
       color-scheme below. That keeps a single list of tokens: the previous
       shape duplicated every dark value in a media query, which is where a
       three-way switch would have had to duplicate it a second time. It
       also makes form controls and scrollbars follow the theme. */
    color-scheme: light dark;

    --brand-primary: #0066FF;
    --brand-primary-hover: #0052cc;
    --brand-secondary: #00489f;
    --brand-secondary-hover: #003d82;
    --color-danger: #dc2626;
    --color-danger-hover: #b91c1c;
    --color-success: #16a34a;
    --color-warning: #d97706;
    --text-primary: light-dark(#111827, #e5e7eb);
    --text-secondary: light-dark(#374151, #d1d5db);
    --text-tertiary: light-dark(#6b7280, #9ca3af);
    --text-muted: light-dark(#9ca3af, #6b7280);
    --bg-page: light-dark(#f9fafb, #0a0a0a);
    --bg-white: light-dark(#ffffff, #141414);
    --bg-subtle: light-dark(#f3f4f6, #1e1e1e);
    --bg-divider: light-dark(#e5e7eb, #2a2a2a);
    --border-card: light-dark(#d1d5db, #2a2a2a);
    --border-divider: light-dark(#e5e7eb, #222222);
    --border-dark: light-dark(#9ca3af, #444444);
    --radius: 5px;
    --radius-lg: 7px;
    --radius-pill: 9999px;
    --shadow-card: light-dark(0 1px 3px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.3));
    --shadow-nav: light-dark(0 1px 2px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.2));
    --height-nav: 56px;
}

/* The person's choice, when they have made one. Without the attribute the
   browser follows the operating system, which is the default and the case
   that needs no control at all. The attribute is rendered server-side from
   a cookie, so the first paint is already correct and the page never
   flashes the wrong theme. */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

* { box-sizing: border-box; }
html { font-family: 'Inter', system-ui, -apple-system, sans-serif; font-size: 15px; }
body { margin: 0; background: var(--bg-page); color: var(--text-primary); line-height: 1.5; }
a { color: var(--brand-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
code, pre { font-family: 'SF Mono', SFMono-Regular, ui-monospace, Menlo, Consolas, monospace; font-size: 0.9em; }
pre { background: var(--bg-subtle); border: 1px solid var(--border-divider); border-radius: var(--radius); padding: 0.75rem 1rem; overflow-x: auto; }
/* Most <code> in the console holds a value with nowhere to break: a
   redirect URI, a client id, a backend address. Left alone they run out
   past the card they sit in, which is worse on a phone but is wrong at
   every width. A card that scrolls sideways is the exception - there the
   row is meant to be read across, so its values stay whole. */
code { overflow-wrap: anywhere; }
.scroll-x code { overflow-wrap: normal; }

/* Layout */
.topbar { height: var(--height-nav); background: var(--bg-white); border-bottom: 1px solid var(--border-divider); box-shadow: var(--shadow-nav);
          display: flex; align-items: center; padding: 0 1.25rem; gap: 1rem; }
.topbar .brand { display: flex; align-items: center; gap: 0.6rem; font-weight: 600; color: var(--text-primary); text-decoration: none; }
.topbar .brand:hover { text-decoration: none; }

/* The logo ships in two colourways because the console has two themes: the
   wordmark is navy on light and white on dark. Both are the same artwork at
   the same aspect ratio, so swapping one for the other never moves the
   layout. Only one is ever displayed, so the hidden one's alt text is not
   read out twice. */
.nf-logo { display: block; width: auto; }
.nf-logo-reverse { display: none; }
/* The wordmark occupies the upper two thirds of the artwork and the
   tagline the lower one, so centring the image leaves the wordmark sitting
   high against the product name beside it. Nudging down by that offset
   lines the two pieces of text up, which is what the eye compares. */
.topbar .nf-logo { height: 30px; position: relative; top: 2px; }
/* The card below carries the 5rem top margin, so the logo takes that
   spacing instead and sits with the card rather than adrift above it. */
.logo-centered { display: flex; justify-content: center; margin: 5rem auto 1.25rem; }
.logo-centered + .login-box { margin-top: 0; }
.logo-centered .nf-logo { height: 46px; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .nf-logo-light { display: none; }
    :root:not([data-theme="light"]) .nf-logo-reverse { display: block; }
}
:root[data-theme="dark"] .nf-logo-light { display: none; }
:root[data-theme="dark"] .nf-logo-reverse { display: block; }
:root[data-theme="light"] .nf-logo-light { display: block; }
:root[data-theme="light"] .nf-logo-reverse { display: none; }
.topbar .tenant { color: var(--text-tertiary); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar .spacer { flex: 1; }
.topbar .who { color: var(--text-secondary); font-size: 0.9rem; }
/* One group rather than three siblings, so a narrow screen folds the
   controls into the menu in a single move. The gap repeats the topbar's
   own, so grouping them changed nothing at full width. */
.topbar-tools { display: flex; align-items: center; gap: 1rem; }
/* Opens the console menu below the sidenav's breakpoint; off above it. */
.nav-toggle { display: none; padding: 0.25rem 0.55rem; font: inherit; font-size: 1.15rem; line-height: 1;
    background: var(--bg-white); color: var(--text-secondary); border: 1px solid var(--border-card);
    border-radius: var(--radius); cursor: pointer; }
.nav-toggle:hover { background: var(--bg-subtle); color: var(--text-primary); }
.shell { display: flex; min-height: calc(100vh - var(--height-nav)); }
.sidenav { width: 220px; padding: 1rem 0; border-right: 1px solid var(--border-divider); background: var(--bg-white); flex-shrink: 0; }
.sidenav a { display: block; padding: 0.5rem 1.25rem; color: var(--text-secondary); }
.sidenav a:hover { background: var(--bg-subtle); text-decoration: none; }
.sidenav a.active { background: #e0ecff; color: var(--brand-secondary); font-weight: 500; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sidenav a.active { background: #1a2a44; color: #93c5fd; } }
:root[data-theme="dark"] .sidenav a.active { background: #1a2a44; color: #93c5fd; }

/* Theme control in the topbar. The global select rule sets width:100%,
   which in the topbar's flex row makes it span whatever is left over. */
.theme-pick { width: auto; font: inherit; font-size: 0.85rem; padding: 0.2rem 1.4rem 0.2rem 0.5rem;
    border-radius: var(--radius); border: 1px solid var(--border-divider);
    background: var(--bg-white); color: var(--text-secondary); }
main { flex: 1; padding: 1.5rem 2rem; max-width: 1100px; }
/* The signed-out pages (sign in, consent, the user's own page, errors)
   have no sidenav, so their main is centred in the window. The console's
   main is a flex item beside the sidenav and starts against it: giving
   both `margin: 0 auto` would push every console page 40px off the nav. */
body > main { margin: 0 auto; }
/* Below this width the sidenav's column does not fit beside the content,
   and the topbar's controls do not fit beside the brand. Both become a
   menu behind the one button, the ezziti console's arrangement: the links
   are the menu, and the controls join them because the alternative is a
   topbar that overflows the screen on every page. */
@media (max-width: 720px) {
    .shell { flex-direction: column; }
    main { padding: 1rem; }
    .topbar { padding: 0 1rem; gap: 0.6rem; flex-wrap: wrap; height: auto; min-height: var(--height-nav); }
    /* The mark alone still says NetFoundry, and the product name is in
       the page title. The space goes to the tenant and the controls. */
    .topbar .brand-name { display: none; }
    .topbar .nf-logo { height: 24px; }
    .nav-toggle { display: block; }
    /* The tools are a row of their own under the brand, which they can be
       because they precede the nav in the document: open the menu and the
       controls and the links stack in the order they are written. */
    body.console .topbar-tools { display: none; order: 3; width: 100%; padding-bottom: 0.6rem; }
    body.console.nav-open .topbar-tools { display: flex; }
    .sidenav { display: none; width: auto; border-right: 0; border-bottom: 1px solid var(--border-divider); }
    body.nav-open .sidenav { display: block; }
    /* The pages with no menu keep their controls in the bar, so the name
       gives way to them. Which signed-in account it is matters less than
       being able to sign out of it. */
    body:not(.console) .topbar .who { display: none; }
}

h1 { font-size: 1.5rem; margin: 0 0 1rem; }
h2 { font-size: 1.1rem; margin: 1.5rem 0 0.75rem; }
.muted { color: var(--text-tertiary); }
.small { font-size: 0.85rem; }

/* Cards and tables */
.card { background: var(--bg-white); border: 1px solid var(--border-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 1rem 1.25rem; margin-bottom: 1rem; }
/* A card's leading heading sits against the card's own padding rather
   than adding to it. This was an inline style on fifteen separate <h2>. */
.card h2:first-child { margin-top: 0; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.stat { background: var(--bg-white); border: 1px solid var(--border-card); border-radius: var(--radius-lg); padding: 1rem; }
.stat .n { font-size: 1.8rem; font-weight: 600; }
.stat .l { color: var(--text-tertiary); font-size: 0.85rem; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--border-divider); vertical-align: top; }
th { color: var(--text-tertiary); font-weight: 500; font-size: 0.85rem; }
/* The dividers are between rows, so the last row has none. Both cell
   kinds, because a table whose rows are labelled (th scope=row) would
   otherwise keep a line under the label column alone. Scoped to tbody so
   that a column header row, which is the last row of its own thead, keeps
   the line that separates it from the data. */
tbody tr:last-child td, tbody tr:last-child th { border-bottom: 0; }

/* Forms */
form.stack > * { display: block; margin-bottom: 0.9rem; }
label { display: block; font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 0.25rem; }
input[type=text], input[type=url], input[type=password], input[type=number], select, textarea {
    width: 100%; max-width: 520px; padding: 0.5rem 0.65rem; font: inherit; color: var(--text-primary);
    background: var(--bg-white); border: 1px solid var(--border-card); border-radius: var(--radius); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--brand-primary); outline-offset: 0; border-color: var(--brand-primary); }
.hint { color: var(--text-tertiary); font-size: 0.8rem; margin-top: 0.2rem; }
.btn { display: inline-block; padding: 0.5rem 0.9rem; font: inherit; font-weight: 500; border-radius: var(--radius); border: 1px solid var(--border-card);
       background: var(--bg-white); color: var(--text-primary); cursor: pointer; }
.btn:hover { background: var(--bg-subtle); text-decoration: none; }
.btn.primary { background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; }
.btn.primary:hover { background: var(--brand-primary-hover); }
.btn.danger { color: var(--color-danger); border-color: var(--color-danger); }
.btn.danger:hover { background: var(--color-danger); color: #fff; }
.btn.small { padding: 0.25rem 0.6rem; font-size: 0.85rem; }
.actions { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }

/* Status */
.pill { display: inline-block; padding: 0.1rem 0.55rem; border-radius: var(--radius-pill); font-size: 0.75rem; font-weight: 600; }
.pill.ok { background: #dcfce7; color: #166534; }
.pill.bad { background: #fee2e2; color: #991b1b; }
.pill.warn { background: #ffedd5; color: #9a3412; }
.pill.off { background: var(--bg-subtle); color: var(--text-tertiary); }
.flash { padding: 0.6rem 0.9rem; border-radius: var(--radius); margin-bottom: 1rem; font-size: 0.95rem; }
.flash.ok { background: #dcfce7; color: #166534; }
.flash.err { background: #fee2e2; color: #991b1b; }
/* A repair plan: the verb leads each line, and a removal is the one the
   reader has to weigh, so it is the only one that is coloured. */
.plan li::marker { color: var(--text-tertiary); }
.plan li.destructive { color: var(--color-danger); font-weight: 500; }
/* The same list nested in a table cell, where it follows the state pill. */
.plan-nested { margin: 0.25rem 0 0; }
.grid-check { text-align: center; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
h3 { font-size: 0.95rem; margin: 1rem 0 0.5rem; }

/* Tabs */
.tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--border-divider); margin: 0.75rem 0; }
.tab { font: inherit; font-weight: 500; padding: 0.4rem 0.8rem; background: none; border: 0; border-bottom: 2px solid transparent; color: var(--text-tertiary); cursor: pointer; margin-bottom: -1px; }
.tab.active { color: var(--brand-secondary); border-bottom-color: var(--brand-primary); }
.tab:hover { color: var(--text-primary); }
.login-box { max-width: 26rem; margin: 5rem auto; }
.error-box { border-left: 4px solid var(--color-danger); }
.error-box h1 { margin-top: 0.25rem; }

/* Help drawer, the ezziti pattern: a ? beside a heading opens a topic in a
   right-hand drawer. */
.help-icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%;
             border: 1px solid var(--border-card); background: var(--bg-subtle); color: var(--text-tertiary); font: 600 0.7rem/1 inherit;
             font-family: inherit; cursor: pointer; vertical-align: middle; margin-left: 6px; padding: 0; }
.help-icon:hover { border-color: var(--brand-primary); color: var(--brand-primary); }
.help-drawer { position: fixed; top: 0; right: 0; width: 380px; max-width: 90vw; height: 100vh; background: var(--bg-white);
               border-left: 1px solid var(--border-card); box-shadow: -4px 0 24px rgba(0,0,0,0.1); transform: translateX(100%);
               transition: transform 0.25s ease; z-index: 1100; display: flex; flex-direction: column; }
.help-drawer-open { transform: translateX(0); }
.help-drawer-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border-card); }
.help-drawer-header h3 { margin: 0; font-size: 1rem; }
.help-drawer-close { background: none; border: 0; font-size: 1.4rem; cursor: pointer; color: var(--text-tertiary); padding: 0 4px; line-height: 1; }
.help-drawer-close:hover { color: var(--text-primary); }
.help-drawer-body { padding: 1.25rem; overflow-y: auto; flex: 1; font-size: 0.9rem; line-height: 1.6; color: var(--text-secondary); }
.help-drawer-body p { margin: 0 0 0.75rem; }
.help-drawer-body ul { margin: 0 0 0.75rem; padding-left: 1.25rem; }
.help-drawer-body li { margin-bottom: 0.4rem; }
.help-drawer-overlay { display: none; position: fixed; inset: 0; z-index: 1099; }
.help-drawer-overlay-open { display: block; }

/* ---- Keyboard focus -------------------------------------------------
   Only form fields had a focus style, so tabbing through the console was
   invisible. :focus-visible keeps it off mouse clicks. */
:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; border-radius: 2px; }

.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; padding: 0.5rem 0.9rem;
    background: var(--bg-white); border: 1px solid var(--border-card); border-radius: var(--radius); }
.skip-link:focus { left: 0.5rem; top: 0.5rem; }

/* Visible to a screen reader, not on screen. For the word behind a dot. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- Page header ----------------------------------------------------
   Title and description on the left, the page's primary action on the
   right, so the action is visible without scrolling past the data. */
.page-head { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1rem; }
.page-head-text { flex: 1; min-width: 0; }
.page-head-text h1 { margin-bottom: 0.25rem; }
.page-head-text p { margin: 0; }
.page-head-actions { flex-shrink: 0; display: flex; gap: 0.5rem; align-items: center; }
@media (max-width: 720px) { .page-head { flex-direction: column; } }

/* ---- Status dot -----------------------------------------------------
   A glyph in a fixed leading column scans faster down a table than a
   pill of varying width in the middle of a row. */
.dot-col { width: 1.5rem; padding-right: 0; }
.dot { display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--text-muted); }
.dot.ok { background: #16a34a; }
.dot.bad { background: #dc2626; }
.dot.warn { background: #ca8a04; }
.dot.off { background: var(--border-dark); }

/* ---- Row actions ----------------------------------------------------
   One menu per row instead of every action always on screen. Built from
   <details> so it works without JavaScript. */
.row-menu { position: relative; display: inline-block; }
.row-menu > summary { list-style: none; cursor: pointer; padding: 0.1rem 0.5rem; border-radius: var(--radius);
    color: var(--text-secondary); font-weight: 600; user-select: none; }
.row-menu > summary::-webkit-details-marker { display: none; }
.row-menu > summary:hover, .row-menu[open] > summary { background: var(--bg-subtle); }
.row-menu-items { position: absolute; right: 0; top: 100%; z-index: 20; min-width: 12rem; padding: 0.25rem;
    background: var(--bg-white); border: 1px solid var(--border-card); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card); }
.row-menu-items form { margin: 0; }
.row-menu-items button, .row-menu-items a { display: block; width: 100%; text-align: left; border: 0;
    background: none; padding: 0.4rem 0.6rem; border-radius: var(--radius); font: inherit; color: var(--text-primary);
    cursor: pointer; white-space: nowrap; }
.row-menu-items button:hover, .row-menu-items a:hover { background: var(--bg-subtle); text-decoration: none; }
.row-menu-items button.danger { color: #b91c1c; }
/* A card that scrolls sideways clips both axes, so a menu floating over
   it would be cut off at its edge - the last row's worst of all, where
   most of the menu is below the card. In there the open menu takes room
   in its own cell instead: the row grows while it is open, which costs a
   reflow and hides nothing. */
.scroll-x .row-menu-items { position: static; }

/* ---- Collapsed groups column ----------------------------------------
   A user federated from a directory can carry dozens of groups. One
   <details> per row shows the count and opens on demand, so the table
   stays one line per user. Built from <details> for the same reason the
   row menu is: it works with script refused. */
.group-cell > summary { list-style: none; cursor: pointer; white-space: nowrap;
    color: var(--text-secondary); user-select: none; }
.group-cell > summary::-webkit-details-marker { display: none; }
.group-cell > summary::before { content: "\25B8"; display: inline-block; width: 0.9rem;
    font-size: 0.8rem; transition: transform 0.1s; }
.group-cell[open] > summary::before { transform: rotate(90deg); }
.group-cell > summary:hover { color: var(--text-primary); }
.group-cell-items { padding: 0.25rem 0 0 0.9rem; }
.group-cell-items span { display: block; }

/* ---- Copy to clipboard ---------------------------------------------- */
.copy { border: 1px solid var(--border-divider); background: var(--bg-white); border-radius: var(--radius);
    padding: 3px 7px; margin-left: 0.4rem; cursor: pointer; color: var(--text-secondary); line-height: 1;
    vertical-align: middle; font: inherit; font-size: 0.85rem; }
.copy:hover { background: var(--bg-subtle); color: var(--text-primary); }
.copy svg { display: block; }

/* Audit: one date heading per day rather than the date on every row. */
.day-row th { background: var(--bg-subtle); color: var(--text-secondary); font-size: 0.8rem;
    font-weight: 600; text-align: left; padding: 0.35rem 0.6rem; }
details.raw { margin-top: 0.25rem; }
details.raw > summary { cursor: pointer; }
details.raw code { display: block; margin-top: 0.25rem; white-space: pre-wrap; word-break: break-all; }

/* A table cell must stay a table cell: .actions sets display:flex, which
   overrides display:table-cell and drops the cell out of the row, so its
   border lands at a different height from its neighbours. Cells that hold
   controls use this instead and put the flex on an inner element. */
td.cell-actions { white-space: nowrap; text-align: right; vertical-align: top; }
td.cell-actions > .actions { justify-content: flex-end; }
/* The nowrap above is for the controls. The sentence that sometimes
   explains a row's state sits in the same cell and is prose: held on one
   line it made the Users table some six hundred pixels wider than its
   content needs, which is a long way to scroll to read a sentence. */
td.cell-actions .hint { white-space: normal; }

/* Rendered markdown. The guides are written for reading, so the column is
   held to a readable measure rather than stretched to the card. */
.doc { max-width: 46rem; }
.doc h1 { margin-top: 0; }
.doc h2 { margin-top: 1.75rem; padding-top: 0.75rem; border-top: 1px solid var(--border-divider); }
.doc h3 { margin-top: 1.25rem; }
.doc code { background: var(--bg-subtle); padding: 0.1rem 0.3rem; border-radius: 3px; }
.doc pre code { background: none; padding: 0; }
.doc table { margin: 1rem 0; }
.doc td, .doc th { vertical-align: top; }
.doc blockquote { margin: 1rem 0; padding: 0.5rem 1rem; border-left: 3px solid var(--border-card);
    color: var(--text-secondary); background: var(--bg-subtle); border-radius: 0 var(--radius) var(--radius) 0; }
.doc li { margin: 0.25rem 0; }
/* The guides are reference rather than a place you work, so they sit apart
   from the pages the console is made of. */
.sidenav .nav-docs { margin-top: auto; border-top: 1px solid var(--border-divider); color: var(--text-tertiary); }

/* Spacing and width utilities
 *
 * Each of these reproduces exactly one inline style that used to sit in a
 * template. They are here rather than there because the content security
 * policy refuses a style attribute: see internal/httpguard. Values are
 * unchanged, so the rendering is the same as before the move.
 *
 * They are named after what they do rather than where they are used,
 * because the same spacing turns up in unrelated places and a semantic
 * name would be wrong in half of them.
 */
.flush-top { margin-top: 0; }
.gap-top-sm { margin-top: 0.5rem; }
.gap-top { margin-top: 0.75rem; }
.tight-bottom { margin-bottom: 0.4rem; }
.tight-bottom-sm { margin-bottom: 0.3rem; }
.hint-flush { margin: 0 0 0.2rem; }
.nowrap { white-space: nowrap; }
/* Positioned so that an absolutely positioned descendant - a .sr-only
   label, a row menu - is laid out against this box rather than against
   the document, which would widen the page by whatever the card scrolls. */
.scroll-x { overflow-x: auto; position: relative; }
.inline-label { display: inline-block; margin-right: 1rem; }

/* The getting-started list on the overview. */
.steps { margin: 0; padding-left: 1.25rem; }
.steps li { margin: 0.3rem 0; }

/* Field widths in rem, sized to their content: a port is 8, a slug or an
   audit filter 12, a hostname or tenant id 16, a backend address 20, a
   display name or group 24. Named by size rather than purpose because the
   same width serves unrelated fields, and a mechanical name is one a
   reader can check against the markup.
 *
 * Each is written out for the form controls as well as bare, because the
 * base rule above is `input[type=text], ... { max-width: 520px }`, which
 * carries a type and an attribute against this class's one class and so
 * wins on specificity. The compound selectors match it and come later, so
 * they win on order. This is the one thing a style attribute did for free
 * and a class does not: it is also why these widths have to be checked in
 * a browser rather than reasoned about. */
.w-8, input.w-8, select.w-8, textarea.w-8 { max-width: 8rem; }
.w-12, input.w-12, select.w-12, textarea.w-12 { max-width: 12rem; }
.w-16, input.w-16, select.w-16, textarea.w-16 { max-width: 16rem; }
.w-20, input.w-20, select.w-20, textarea.w-20 { max-width: 20rem; }
.w-24, input.w-24, select.w-24, textarea.w-24 { max-width: 24rem; }