/* Langraph study screen — self-contained, no external assets. */

:root {
  --bg: #fbfaf7;
  --surface: #ffffff;
  --border: #d9d4c9;
  --text: #232019;
  --muted: #6d675c;
  --accent: #a95309;
  --accent-soft: #f6ece2;
  --error: #a32b1c;
  --error-soft: #fbeae7;
  /* Derived forms in a paradigm are green, and grey already means
     'nothing here'. Shared with the admin palette, which has had
     this since feature 028. */
  --ok: #1f7a3d;
  --radius: 10px;
  /* One column for the header and the page under it. */
  --column: 800px;

  /* The dark palette's values, stated once. The two blocks below map
     them; nothing else should name a dark colour. */
  --dark-bg: #16150f;
  --dark-surface: #1f1e17;
  --dark-border: #3a372c;
  --dark-text: #ece8dd;
  --dark-muted: #a49c8c;
  --dark-accent: #e59b57;
  --dark-accent-soft: #3a2812;
  --dark-error: #f08a7a;
  --dark-error-soft: #3a1f1a;
  --dark-ok: #6dc98a;
}

/* ------------------------------------------------------- the dark palette
 *
 * Two ways in, one palette (feature 035). Until now these tokens answered ONLY
 * to `prefers-color-scheme`, so dark mode worked and could not be chosen; the
 * `data-theme` attribute is the choice, written by `shared/appearance.js` and
 * applied before first paint by the inline script in the document head.
 *
 * Three states, and the third is the absence of an attribute:
 *
 *   no attribute      follow the device   ← the media query below
 *   data-theme=light  stay light          ← excluded from the media query
 *   data-theme=dark   stay dark           ← the second block
 *
 * `system` writes no attribute rather than `data-theme="system"`, so the media
 * query needs one exclusion instead of every rule needing a condition.
 *
 * The values live on `:root` as `--dark-*` and the two blocks map them, so a
 * colour is stated once. `color-scheme` rides along: it is what makes the
 * scrollbars, form controls and caret follow the choice too, which a token
 * cannot do.
 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: var(--dark-bg);
    --surface: var(--dark-surface);
    --border: var(--dark-border);
    --text: var(--dark-text);
    --muted: var(--dark-muted);
    --accent: var(--dark-accent);
    --accent-soft: var(--dark-accent-soft);
    --error: var(--dark-error);
    --error-soft: var(--dark-error-soft);
  --ok: var(--dark-ok);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: var(--dark-bg);
  --surface: var(--dark-surface);
  --border: var(--dark-border);
  --text: var(--dark-text);
  --muted: var(--dark-muted);
  --accent: var(--dark-accent);
  --accent-soft: var(--dark-accent-soft);
  --error: var(--dark-error);
  --error-soft: var(--dark-error-soft);
  --ok: var(--dark-ok);
}

* { box-sizing: border-box; }

/* ============================================================ hidden means hidden
 *
 * `hidden` has no power of its own: its effect comes from a browser default rule
 * that ANY author rule setting a `display` outranks. Four elements were marked
 * hidden and rendering anyway — the sign-in bar, both editing badges, and the
 * grade buttons, which meant a learner could grade a card they had not read.
 *
 * `!important` is the right tool here and not a smell. `hidden` states whether an
 * element exists to the user; that outranks any statement about how it is laid
 * out. And it cannot be won on specificity — `#grades` is an id selector, which
 * beats any attribute-plus-class guard — so the guard has to claim a different
 * kind of authority.
 *
 * tests/integration/test_hidden_elements.py asserts the property rather than this
 * rule, so a future override fails a test instead of shipping.
 */
[hidden] { display: none !important; }


body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  display: flex;
  flex-direction: column;
}

/* The rule spans the window; the contents do not (feature 035). */
.bar {
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.bar-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: var(--column);
  max-width: 100%;
  margin: 0 auto;
  padding: .75rem 1.25rem;
}
/* Three flex items: the mark, the word, the section. `.wordmark` keeps the
   accented letter from becoming a fourth and opening a gap mid-word. */
.brand { font-weight: 600; display: flex; align-items: center; gap: .5rem; }
.wordmark {
  font-family: "Commissioner", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  letter-spacing: -.012em;
}
/* The stressed vowel takes the scheme's accent, not the brand file's. */
.tonos { color: var(--accent); }
.lang {
  font: inherit;
  font-size: .85rem;
  padding: .25rem .4rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.muted { color: var(--muted); }

/* ------------------------------------------ the progress strip (2026-09-02)
 *
 * Under the header, the full column wide: the deck on the left (Günlük, or the
 * theme names and the not-recorded mark), the counts on the right. The header
 * keeps the wordmark and the account button and nothing that can wrap them.
 * Same treatment as the sync line below it, which stacks under it when shown.
 */
.strip { border-bottom: 1px solid var(--border); background: var(--surface); }
.strip-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: .2rem 1rem;
  width: var(--column);
  max-width: 100%;
  margin: 0 auto;
  padding: .4rem 1.25rem;
  font-size: .85rem;
  color: var(--muted);
}
.strip-context .names { color: var(--accent); }
.strip-count { margin-left: auto; white-space: nowrap; font-variant-numeric: tabular-nums; }

main {
  flex: 1;
  width: var(--column);
  max-width: 100%;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 3rem;
}

.sync {
  margin: 0;
  padding: .4rem 1.25rem;
  font-size: .8rem;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.sync.warn { color: var(--accent); background: var(--accent-soft); }

/* `.view[hidden]` used to live here; the guard above subsumes it. */
.center { text-align: center; }

/* A heading takes focus when its view opens (042 FR-031) so a screen reader is
   told where it is; a sighted reader does not need a ring around a title they
   did not click. The focus stays, the outline goes. */
h2[tabindex="-1"]:focus { outline: none; }

/* Read by assistive technology, drawn nowhere: the view headings that take
   focus, and the announcer (042 FR-031). */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}

/* One placement rule for the two cards (042 FR-035): the deck and the session
   end sit at the same height, centred in the column when the window is taller
   than they are, rather than one at the top and the other wherever. */
#view-study:not([hidden]), #view-done:not([hidden]) {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
#view-study .card, #view-done .card { margin-block: auto; }
#view-study .card { margin-bottom: 0; }
#view-study .study-foot { margin-bottom: auto; }
#view-study .intro { margin-top: auto; margin-bottom: .75rem; }
#view-study .intro + .card { margin-top: 0; }

/* The first-run note (042 FR-034): quiet, dismissible, once. */
.intro {
  display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center;
  padding: .75rem 1rem;
  border: 1px solid var(--border);
  border-inline-start: 3px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: .9rem; color: var(--muted);
}
.intro p { margin: 0; flex: 1 1 18rem; }

/* ----------------------------------------------------------------- card */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  min-height: 18rem;
  display: flex;
  flex-direction: column;
}

.card-head { display: flex; gap: .6rem; align-items: center; margin-bottom: 1rem; }

.badge {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: .15rem .45rem;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
}

.prompt {
  font-size: clamp(1.5rem, 4vw, 2.1rem);
  line-height: 1.3;
  margin: auto 0 0;
  overflow-wrap: anywhere;
}

hr { border: 0; border-top: 1px solid var(--border); margin: 1.25rem 0; }

.answer {
  font-size: clamp(1.2rem, 3vw, 1.6rem);
  margin: 0;
  color: var(--accent);
  overflow-wrap: anywhere;
}

.actions { margin-top: auto; padding-top: 1.5rem; }
#grades { display: flex; flex-wrap: wrap; gap: .5rem; }

/* The forecast under each grade (042 FR-016): `3 gün`, `10 dk`. Its own line,
   quieter than the label; an empty slot takes no room, so a deck without
   forecasts (offline, themed) lays out exactly as before. */
#grades .preview {
  display: block;
  margin-top: .15rem;
  font-size: .75rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
#grades .preview:empty { display: none; }
.primary .preview { color: rgba(255,255,255,.85); }

/* Again is told apart by more than its colour (042 FR-017): a heavier border
   and a marker, which both survive greyscale and both colour schemes — the
   tokens flip, the border weight and the glyph do not. */
#grades button[data-grade="again"] {
  border-width: 2px;
  border-color: var(--error);
}
#grades button[data-grade="again"] > span:first-child::before {
  content: "↺ ";
  color: var(--error);
}

button {
  font: inherit;
  /* 44px tall, which is the touch minimum and not a round number by accident:
     9px + 9px padding, the 24px line box `font: inherit` gives at 16px/1.5, and
     2px of border. It was 42 — two short, on the controls this app asks a thumb
     to hit more than any other, since every card ends in a grade.

     Padding rather than `min-height`: a min-height would leave the label sitting
     1px above centre, and reaching 44 by making the button a centred flex box
     would silently drop the whitespace between each label and its `kbd`. */
  padding: .5625rem .9rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}
button:hover { border-color: var(--accent); }
button:focus-visible, a:focus-visible, input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
button.primary { background: var(--accent); color: #fff; border-color: transparent; }
button.ghost { background: transparent; color: var(--muted); }
button[disabled] { opacity: .5; cursor: default; }

kbd {
  font: .75em ui-monospace, Consolas, monospace;
  padding: .05em .3em;
  border: 1px solid var(--border);
  border-radius: 4px;
  margin-left: .35rem;
  color: var(--muted);
}
.primary kbd { border-color: rgba(255,255,255,.4); color: rgba(255,255,255,.85); }

.note { margin: .75rem 0 0; font-size: .85rem; color: var(--muted); }
.note.error { color: var(--error); background: var(--error-soft); padding: .5rem .7rem; border-radius: 6px; }

.wander-open { margin-top: 1rem; }

/* ------------------------------------------- the session's end (042 US2) */
.done-detail p { margin: .35rem 0 0; font-size: .95rem; }
.progress {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  text-align: left;
}
.progress p { margin: .35rem 0 0; font-size: .9rem; color: var(--muted); }
.progress .progress-label { margin-top: .9rem; font-size: .8rem; }
/* Seven days, seven bars, oldest first. Quiet by design: a row a learner
   can read at a glance, not a chart to study. */
.week { display: flex; gap: .4rem; align-items: stretch; height: 4.75rem; margin-top: .3rem; }
.week .day {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  font-size: .7rem; color: var(--muted); gap: .15rem;
}
.week .bar {
  width: 100%;
  background: var(--accent-soft);
  border-top: 2px solid var(--accent);
  border-radius: 2px 2px 0 0;
}
.week .count { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------- sign in */
.signin {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  max-width: 20rem;
  margin: 1.5rem auto 0;
  text-align: left;
}
.signin label { font-size: .8rem; color: var(--muted); }
.signin input {
  padding: .6rem;
  font: inherit;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.signin button { margin-top: .75rem; padding: .7rem; }

/* --------------------------------------------------------------- wander */
.wander-bar { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; margin-bottom: 1rem; }
.crumbs { font-size: .85rem; color: var(--muted); overflow-wrap: anywhere; }
.crumbs span + span::before { content: " › "; }

/* The results overlay what is below rather than sitting in the flow. Listed in
   the flow they pushed the node's whole card down as you typed, so the thing you
   were reading moved while you read it — the same reason the admin page's search
   became an overlay. The wrapper is what the list is positioned against, which
   is why the input and the list share one. */
.wander-search { margin-bottom: 1rem; position: relative; }
.wander-search input {
  width: 100%;
  padding: .5rem .6rem;
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.node {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
}
.node h2 { margin: 0 0 .25rem; font-size: 1.6rem; overflow-wrap: anywhere; }
.node .kind { font-size: .8rem; color: var(--muted); }

.section { margin-top: 1.5rem; }
/* One rule for both, so a section heading and the forms heading cannot drift.
   `h4` is the paradigm's, rendered by the shared module; `h3` is a section's.
   They were a small muted all-caps label and an unstyled browser default, which
   read as two different kinds of thing on one page. */
.section h3,
.section h4 {
  margin: 0 0 .5rem;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
}
.section .more { font-size: .75rem; color: var(--muted); margin-left: .4rem; text-transform: none; letter-spacing: 0; }

.links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .15rem; }
.links li { border-bottom: 1px solid var(--border); }
.links li:last-child { border-bottom: 0; }

.links button, .links .fact {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  padding: .45rem .3rem;
  border-radius: 6px;
}
.links button:hover { background: var(--accent-soft); }
.links .label { overflow-wrap: anywhere; }
.links .detail { color: var(--muted); font-size: .85rem; }
.links .fact { display: flex; justify-content: space-between; gap: 1rem; padding: .35rem .3rem; }

/* One line for the sections that hold a fact or two rather than a list. No
   border, no row padding: a comma does the separating a rule used to. */
.inline-facts { margin: 0; padding: .1rem 0; line-height: 1.6; }
.inline-facts .detail { color: var(--muted); font-size: .85rem; }
.inline-facts .inline-link {
  border: 0;
  background: transparent;
  padding: 0;
  font: inherit;
  color: var(--accent);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: .15em;
}
.inline-facts .inline-link:hover { text-decoration-thickness: 2px; }

.hits {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 14rem;
  overflow-y: auto;
  position: absolute;
  top: calc(100% + .35rem);
  left: 0;
  right: 0;
  z-index: 30;
  /* Solid, and the panel's own colour: a dropdown floating over the node card
     with a see-through background is unreadable in exactly the moment it
     matters. Both themes define --surface. */
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 .5rem 1.25rem rgba(0, 0, 0, .28);
}

/* An empty list is not a very short dropdown: it is no dropdown. Without this
   the border and shadow draw as a thin bar under the box before you type. */
.hits:empty { display: none; }
.hits li { border-bottom: 1px solid var(--border); }
.hits li:last-child { border-bottom: 0; }
.hits button { display: block; width: 100%; text-align: left; border: 0; background: transparent; padding: .4rem .3rem; }
/* The CURRENT option — the one Enter would open. Hover and the arrow keys write
   the same state (feature 030), so this is one rule rather than a hover rule
   beside a keyboard rule. The admin page carries the identical rule. */
.hits button[aria-selected="true"] {
  background: var(--accent-soft);
  box-shadow: inset 3px 0 0 var(--accent);
}

/* --------------------------------------------------------------- legend */
.legend {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .75rem 1rem;
  font-size: .85rem;
  box-shadow: 0 6px 24px rgba(0,0,0,.12);
}
.legend h3 { margin: 0 0 .5rem; font-size: .8rem; text-transform: uppercase; color: var(--muted); }
.legend dl { display: grid; grid-template-columns: auto 1fr; gap: .2rem .8rem; margin: 0; }
.legend dt { white-space: nowrap; }
.legend dd { margin: 0; color: var(--muted); }

/* ----------------------------------------------------------------- phone */
@media (max-width: 480px) {
  main { padding: 1rem .75rem 2rem; }
  .bar { padding: .6rem .75rem; }
  .sync { padding: .4rem .75rem; }
  .strip-inner { padding: .4rem .75rem; }
  .card { padding: 1rem; min-height: 15rem; }

  /* Four across on ONE row (FR-034).
     This said "four across" in a comment while laying out two columns in two
     rows, which pushed the answer off a phone screen — the mismatch between the
     comment and the code is why it survived. The shortcut stays visible: there
     is no keyboard here, but the number is how the grades are referred to. */
  #grades {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .35rem;
  }
  #grades button {
    padding: .8rem .25rem;
    font-size: .8rem;
    line-height: 1.2;
    min-width: 0;               /* let a long label shrink rather than overflow */
  }
  #grades button span { display: block; overflow-wrap: anywhere; }
  #grades kbd { font-size: .65rem; padding: 0 .25rem; opacity: .75; }
  #reveal { width: 100%; padding: .8rem; }
  .study-foot { flex-direction: column; }
  .wander-open { width: 100%; }
  .legend { left: .75rem; right: .75rem; bottom: .75rem; }
}


/* -------------------------------------------------------------- settings */
.setting { display: block; margin: 0 0 1.25rem; }
.setting-name { display: block; font-weight: 600; margin-bottom: .3rem; }
.setting input, .setting select {
  width: 100%;
  padding: .5rem;
  font: inherit;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
}
.setting-help {
  display: block;
  margin-top: .35rem;
  color: var(--muted);
  font-size: .85rem;
  line-height: 1.45;
}

/* The stop control sits beside "explore", not among the grades: it must not be
   reachable by the thumb that is aiming for a grade. */
.study-foot { display: flex; gap: .5rem; margin-top: .75rem; }
.study-foot button { flex: 1; }

/* ------------------------------------------------------- themed study (033) */

.theme-choices { list-style: none; margin: 0; padding: 0; }
.theme-choices li { margin: 0 0 .5rem; }
/* A tick beside each name (042 FR-028): the button still starts one theme alone;
   the ticks and Start make a deck of several. The box is a 44px target. */
.theme-row { display: flex; align-items: center; gap: .5rem; }
.theme-row input[type="checkbox"] { width: 1.25rem; height: 1.25rem; margin: 0 .35rem; flex: 0 0 auto; }
.theme-choices button {
  flex: 1; min-width: 0;
  width: 100%; text-align: left; display: flex; justify-content: space-between;
  gap: 1rem; align-items: baseline;
}
.theme-choices .count { font-size: .85em; opacity: .75; }
/* A theme with nothing studyable in it is offered as unavailable rather than
   hidden: an author needs to see that the theme exists and is empty, and a
   learner who tapped it once should not wonder where it went. */
.theme-choices button[disabled] { opacity: .5; cursor: not-allowed; }

/* FR-019's not-recorded mark moved into the progress strip (2026-09-02). */

/* A theme's Greek name beside the reader's own (034). Quieter than the label it
   follows: it is the same theme said twice, not a second theme. */
.theme-choices .theme-name-el { opacity: .7; font-style: italic; }

/* The way out to a dictionary (034). Quiet by default and obvious on hover: it
   is an escape hatch, not a call to action. */
.dictionary {
  text-decoration: none; opacity: .55; font-size: .9em;
  padding: 0 .2rem; align-self: center;
}
.dictionary:hover, .dictionary:focus-visible { opacity: 1; }

/* ------------------------------------------------ the account menu (035) */

.account { position: relative; margin-left: auto; }

.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
}
#account-menu[aria-expanded="true"] {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}

.menu {
  position: absolute;
  top: calc(100% + .4rem);
  right: 0;
  z-index: 20;
  min-width: 12rem;
  padding: .35rem;
  display: flex;
  flex-direction: column;
  gap: .1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 28px rgb(0 0 0 / .14);
}
.menu button {
  border: 0;
  background: transparent;
  border-radius: 7px;
  text-align: left;
  width: 100%;
}
.menu button:hover { background: var(--accent-soft); border-color: transparent; }
.menu-rule { height: 1px; background: var(--border); margin: .25rem .4rem; }

/* On a narrow screen the panel spans the bar rather than hanging off its right
   edge, where a 12rem panel would sit half off a 320px phone. */
@media (max-width: 30rem) {
  .menu { right: -.5rem; left: auto; min-width: 13rem; }
}

/* ------------------------------------------------ appearance settings (035) */

.setting.segmented {
  border: 0;
  padding: 0;
  margin: 0 0 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.setting.segmented legend { padding: 0; margin-bottom: .3rem; width: 100%; }
.setting.segmented label {
  /* The radio inside is `position: absolute` (below). Without a positioned
     ancestor it laid out against the PAGE and landed 240px past its right
     edge — the whole settings view scrolled sideways (042 F6, research R11). */
  position: relative;
  flex: 1;
  min-width: 5.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-height: 44px;
  padding: 0 .6rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--muted);
  cursor: pointer;
}
/* The radio itself is the state; hiding it and styling the label keeps the
   keyboard behaviour a radio group already has. */
.setting.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.setting.segmented label:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}
.setting.segmented label:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.setting.switch-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .1rem .6rem;
  align-items: center;
  cursor: pointer;
}
.setting.switch-row input { grid-row: span 3; width: 1.15rem; height: 1.15rem; }
.setting.switch-row .setting-help,
.setting.switch-row .setting-when { grid-column: 2; }

/* Whether a setting applies now or to the next session (042 FR-008). Quieter
   than the help above it: it is a fact about timing, not about the setting. */
.setting-when {
  display: block;
  margin-top: .2rem;
  color: var(--muted);
  font-size: .8rem;
  font-style: italic;
}
.setting.segmented .setting-when { flex-basis: 100%; margin-top: 0; }