/*
  <main>
    <h1>shikiri<span lang="ja"></span></h1>
    <p class="tagline">
    <form id="config"> <fieldset><legend/><label><input/></label></fieldset> ×3 </form>
    <figure class="preview"><figcaption/><p class="bar"><span class="bm"><span class="fav"/></span> <img#preview-icon> </p></figure>
    <section class="use"> <ol><li><a#bookmark-link></li></ol> <p class="menu-tip"><button#copy-title></p> </section>
    <section class="caveats"><ul/></section>
    <footer><a/></footer>
  </main>
*/

:root {
  --bg: #f7f6f3;
  --bg-raised: #fff;
  --fg: #2c2b28;
  --fg-soft: #78766f;
  --line: #0002;
  --accent: #a0522d;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #21201d;
    --bg-raised: #2b2a26;
    --fg: #e8e6e0;
    --fg-soft: #9a978e;
    --line: #fff2;
    --accent: #d98a5f;
  }
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: system-ui, sans-serif;
  line-height: 1.55;

  main { margin: 3rem auto 4rem; max-width: 40rem; padding: 0 1.25rem; }

  h1 {
    font-size: 2rem;
    font-weight: 600;

    span {
      color: var(--fg-soft);
      font-size: .55em;
      font-weight: 400;
      margin-left: .6em;
    }
  }

  h2 { font-size: 1.05rem; margin-block: 1.8rem .4rem; }

  .tagline { color: var(--fg-soft); }

  #config {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
    margin-block: 1.6rem;

    fieldset {
      border: 1px solid var(--line);
      border-radius: 8px;
      display: grid;
      gap: .2rem;
      padding: .5rem .9rem .7rem;
    }

    legend { color: var(--fg-soft); font-size: .8rem; padding-inline: .3em; }

    label {
      align-items: center;
      display: flex;
      font-size: .95rem;
      gap: .45em;
    }

    small { color: var(--fg-soft); }
    input[type='color'] { inline-size: 3rem; }
    input[type='range'] { inline-size: 6rem; }
  }

  .preview {
    figcaption { color: var(--fg-soft); font-size: .8rem; margin-block-end: .4rem; }

    /* Mimics Chrome's bar: 16px favicons beside small labels on a raised strip */
    .bar {
      align-items: center;
      background: var(--bg-raised);
      border: 1px solid var(--line);
      border-radius: 8px;
      display: flex;
      font-size: 12px;
      gap: 1rem;
      padding: .45rem .9rem;

      .bm { align-items: center; display: flex; gap: .35em; }

      .fav { font-size: 13px; }
      img { display: block; }
    }

    /* Mimics an open bookmarks-folder dropdown: icon + name rows */
    .menu {
      background: var(--bg-raised);
      border: 1px solid var(--line);
      border-radius: 8px;
      display: grid;
      font-size: 12px;
      gap: .35rem;
      inline-size: max-content;
      min-inline-size: 11rem;
      padding: .45rem .9rem;

      li { align-items: center; display: flex; gap: .35em; }
      .fav { font-size: 13px; }
      /* the transparent favicon's 16px slot, then the line-as-name */
      .sep { padding-inline-start: calc(16px + .35em); }
    }
  }

  .use {
    ol {
      display: grid;
      gap: .3rem;
      padding-inline-start: 1.2rem;

      li { list-style: decimal; }
    }

    #bookmark-link {
      border: 1px dashed var(--accent);
      border-radius: 6px;
      color: var(--accent);
      /* a link, but its job is being dragged, not followed */
      cursor: grab;
      display: inline-block;
      padding: .1em .8em;
      text-decoration: none;

      /* The glyph is generated content so drag extraction never sees it — the
         anchor's real text is U+2063 and the bookmark's name stays invisible */
      &::before { content: attr(data-glyph); }
    }

    .menu-tip { color: var(--fg-soft); margin-block-start: .7rem; }
  }

  .caveats ul {
    color: var(--fg-soft);
    padding-inline-start: 1.2rem;

    li { list-style: disc; }
  }

  footer {
    color: var(--fg-soft);
    font-size: .85rem;
    margin-block-start: 3rem;

    a { color: inherit; }
  }
}